他のリストへのテキスト参照を追加するには？

Question

列にコメントを追加したい場合は、列にコメントを追加します。誰でも私を助けてくれますか？続き

<dl class="listings"> 
<dt>Apple</dt> 
<dd>Delicious</dd> 
<dt>Green Apple</dt> 
<dd>Love it!</dd> 
</dl> 
<table> 
<tr> 
<td>Apple, Orange, Banana</td> 
<td>Green Apple, Lemon</td> 
</tr> 
</table> 

$(document).ready(function() { 
     $(".listings").find('dt').each(function() { 
      var title = $(this).html(); 
      var comment = $(this).next().html(); 
      $('table td').filter(":contains('"+title+"')").each(function(){ 
       $(this).html('<span>'+title+'</span><span>'+comment+'</span>'); 
      }); 
     }); 
    }); 

期待

Apple Delicious, Orange, Banana 
Green Apple Love it!, Lemon 

結果

Apple Delicious 
Apple Delicious 

Answer 1

は、変更したいテーブル内の語句/単語はすべてカンマで区切られ前提としています。

それ以外の場合は「Apple」自体も「Green Apple」にあり、「Green Apple Delicious Love it！」のようなものに変わります。したがって

各1の直接の平等の一致をすべてのフレーズを分割して行う必要があるが、個別にここ

Answer 2

$(".listings").find('dt').each(function() { 
 
    var title = $(this).html(); 
 
    var comment = $(this).next().html(); 
 

 
    $('table td').filter(":contains('" + title + "')").html(function(_, currHtml) { 
 
     // break all the phrases into array by splitting at comma 
 
     // and map array to new html strings 
 
     return currHtml.split(',').map(function(phrase){ 
 
     // check each phrase/word separately 
 
     phrase = phrase.trim() 
 
     if(phrase===title){ 
 
      return '<span>' + title + '</span><span> ' + comment + '</span>' 
 
     }else{ 
 
      return phrase; 
 
     } 
 
     // join array back into string 
 
     }).join(', '); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<dl class="listings"> 
 
    <dt>Apple</dt> 
 
    <dd>Delicious</dd> 
 
    <dt>Green Apple</dt> 
 
    <dd>Love it!</dd> 
 
</dl> 
 
<table> 
 
    <tr> 
 
    <td>Apple, Orange, Banana</td>  
 
    </tr> 
 
    <tr> 
 
    <td>Green Apple, Lemon</td> 
 
    </tr> 
 
</table>

は、あなたがして、各 <td>単語を分割する splitを使用することができますIT-が私の感想です区切り文字としてカンマ。そう、あなたのHTMLを追加し、それが join(",")

とあった方法でそれを元に戻す場合

次に、配列を見て、あなたがあなたのタイトルおよびTDワード

から試合を持っているかどうかを確認するためにindexOfを使用

$(document).ready(function() { 
 
    $(".listings").find('dt').each(function() { 
 
    var title = $(this).html(); 
 
    var comment = $(this).next().html(); 
 
    $('table td').each(function() { 
 
     // split the td text into an array using , a the deliminator 
 
     var split = $(this).text().trim().split(","); 
 
     // indexOf will let us know if the title is in this array 
 
     var index = split.indexOf(title); 
 
     // if its in the array then add the comment 
 
     if (index > -1) { 
 
     // we have a match in this <td> 
 
     split[index] = '<span>' + title + '</span> <span>' + comment + '</span>' 
 
     // put the array back to the way it was with a , 
 
     $(this).html(split.join(", ")); 
 
     } 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<dl class="listings"> 
 
    <dt>Apple</dt> 
 
    <dd>Delicious</dd> 
 
    <dt>Green Apple</dt> 
 
    <dd>Love it!</dd> 
 
</dl> 
 
<table> 
 
    <tr> 
 
    <td>Apple, Orange, Banana</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Green Apple, Lemon</td> 
 
    </tr> 
 
</table>