jQueryでリストの要素を取得し条件分岐した上でHTML要素を追加したい

現在、既存で組まれたHTMLがあり、
店舗名（.shop_name）を取得し、条件分岐でA店なら「https://exsample1.com」を、B店なら「https://exsample2.com」を<div clas="to-dtl">の下に追加しようと改修しておりますがうまく来ませんのでご教授願います。

※既存からあるサイトなのでHTMLが変な組み方になっています・・・。

HTML
1<table>
2 <tr>
3  <td><span class="shop_name">A店</span></td>
4  <td>
5    <div class="to-dtl"></div>
6　　 <!-- ここに条件判定したリンクボタンを追加したい -->
7　　 <!-- （例）<a href="https://exsample1.com">LINEで相談</a>
8  </td>
9</tr>
10</table>
11
12<table>
13 <tr>
14  <td><span class="shop_name">B店</span></td>
15  <td>
16    <div class="to-dtl"></div>
17　　 <!-- ここに条件判定したリンクボタンを追加したい -->
18  </td>
19</tr>
20</table>
21
22<table>
23 <tr>
24  <td><span class="shop_name">C店</span></td>
25  <td>
26    <div class="to-dtl"></div>
27　　 <!-- ここに条件判定したリンクボタンを追加したい -->
28  </td>
29</tr>
30</table>

javascript
1$(function(){
2    if($('.shop_name').text().match('A店')){
3      $('.to-dtl').after(`
4        <div class="line-btn">
5          <a href="https://exsample1.com">LINEで相談</a>
6        </div>
7        `)
8      }else if($('.shop_name').text().match('B店')){
9      $('.to-dtl').after(`
10        <div class="line-btn">
11          <a href="https://exsample2.com">LINEで相談</a>
12        </div>
13        `)
14    }
15});
16

m.ts10806

2021/09/26 03:29

HTMLは一切かえられませんか？

rinrin1137

2021/09/26 03:40

PHPで記述されていてループの部分が丸っとヒアドキュメントになっていますので厳しそうです。ループのヒアドキュメントを分割することもしてみたのですが、エラーになってしまったので今回はHTMLが生成されたあとのDOM操作でなんとかならないか模索しておりました。

m.ts10806

2021/09/26 04:25

現状でも不可能ではないですが、HTMLを変更できるならそちらのほうが圧倒的に楽になる（仕様変更にも対応できる）という点は指摘しておきます。

m.ts10806

2021/09/26 04:26

あと細かくて申し訳ないですが「例」としたいならexsampleではなくexampleですね。

行動規範の内容に同意します

回答1件

ベストアンサー

問題点は2つ。

$('.shop_name').text()だと.shop_name全部が対象になる
$('.to-dtl').after()だと.to-dtl全部が対象になる

ので下記が改修方針。
0. $('.shop_name').text()をループして個々の要素に対する処理にする
0. 個々の.shop_nameと関連した場所の.to-dtlを選択する

js
1$(function () {
2  $('.shop_name').each(function (i, e) {
3    let target_element = $(e).parent().next().find('div.to-dtl');
4    if ($(e).text().match('A店')) {
5      target_element.after(`
6        <div class="line-btn">
7          <a href="https://exsample1.com">LINEで相談</a>
8        </div>
9        `)
10    } else if ($(e).text().match('B店')) {
11      target_element.after(`
12        <div class="line-btn">
13          <a href="https://exsample2.com">LINEで相談</a>
14        </div>
15        `)
16    }
17  });
18});

個人的には同じこと何回も書きたくないので、リストで持って参照。

js
1const list = {"A店":"https://exsample1.com","B店":"https://exsample2.com",};
2$(function () {
3  $('.shop_name').each(function (i, e) {
4    let target_element = $(e).parent().next().find('div.to-dtl');
5    let target_name = $(e).text();
6    if(list[target_name]){
7      target_element.after(`
8        <div class="line-btn">
9          <a href="${list[target_name]}">LINEで相談</a>
10        </div>
11        `)
12    }
13  });
14});

html変更できるならdata属性で持って参照。

html
1<span class="shop_name" data-target="https://exsample1.com">A店</span>

js
1$(function () {
2  $('.shop_name').each(function (i, e) {
3    let target_element = $(e).parent().next().find('div.to-dtl');
4    let target_name = $(e).text();
5    if($(e).data('target')){
6      target_element.after(`
7        <div class="line-btn">
8          <a href="${$(e).data('target')}">LINEで相談</a>
9        </div>
10        `)
11    }
12  });
13});