同じ変数クラスを持つ要素の値を取得する

Question

同様の質問を投稿しましたが、この場合は意味があります。多くの最初のtdのtrのテーブルがあります。最初にtdが重複していて、別のtrに重複しています。私はこれらを識別のために使用しています。私は2番目のtrから値を取り出し、それを最初のtrにすでに追加された（！）tdに挿入したいと思います。ここでは簡単なHTMLのコード例は、

<div class="tableclass"> 
    <table> 
    <tbody> 
     <tr> 
     <td>id1</td> 
     <td>something else</td> 
     <td>1</td> 
     </tr> 
     <tr> 
     <td>id2</td> 
     <td>something else</td> 
     <td>2</td> 
     </tr> 
     <tr> 
     <td>id2</td> 
     <td>something else</td> 
     <td>3</td> 
     </tr> 
     <tr> 
     <td>id3</td> 
     <td>something else</td> 
     <td>4</td> 
     </tr> 
     <tr> 
     <td>id1</td> 
     <td>something else</td> 
     <td>5</td> 
     </tr> 
    <tbody> 
    </table> 
<div> 

そして、ここで私のjqueryのコードは

$(".tableclass table tbody tr").each(function(){ 
    $(this).append('<td class="fbctr"></td>'); 
    var trclass = $(this).find("td:first-child").html(); 
    $(this).addClass(trclass); 
    // this is where I'm having a problem 
    var fbctr = $(this).parent().filter(trclass).eq(2).find("td:nth-child(3)"); 
    $(this).find(".fbctr").html(fbctr); 
}); 

Answer 1

でOK、あなたの問題は、与えられたDOM要素の集合にjquery.filter()作品ということです。最初に<tr>要素を選択してから.filter()を使用する必要があります。あなたの質問では、上でそれを適用しているあなたの<table>

ので、JavaScriptコードは次のようになります：コピーしたい場合には

：

$(".tableclass table tbody tr").each(function(){ 
    var trclass = $(this).find("td:first-child").html(); 
    $(this).addClass(trclass); 
    var fbctr = $(this).parent().find('tr').filter('.'+trclass).eq(1).find("td:nth-child(3)").html(); 
    if(typeof fbctr !== "undefined"){ 
     console.log(fbctr); 
     $(this).find(".fbctr").html(fbctr); 
    } 
}); 

アップデート（修正されたコード） 最初の発生要素第2の発生要素、このコードを使用します。

$(".tableclass table tbody tr").each(function(){ 
    var trclass = $(this).find("td:first-child").html(); 
    $(this).addClass(trclass); 
    var elements = $(this).parent().find('tr').filter('.'+trclass); 
    if(elements.length > 1){ 
     var fbctr = elements.eq(0).find("td:nth-child(3)").html(); 
     if(typeof fbctr !== "undefined") 
     $(this).find(".fbctr").html(fbctr); 
    } 
}); 

そして場合には、あなたは、最初存在する元素に二発生した要素の値をコピーし、このコードを使用する：

$(".tableclass table tbody tr").each(function(){ 
    var trclass = $(this).find("td:first-child").html(); 
    $(this).addClass(trclass); 
    var elements = $(this).parent().find('tr').filter('.'+trclass); 
    var fbctr = elements.eq(1).find("td:nth-child(3)").html(); 
    if(typeof fbctr !== "undefined") 
     $('.'+trclass).not(this).find(".fbctr").html(fbctr); 
}); 

Answer 2

は、あなたが最初に重複する行をフィルタリングして削除することができ、すべての最初の行では最後の重複行の3番目の要素を追加します。

以下の解決策では、重複する行も削除していますので、要件に応じて削除/削除することができます。

ここでは、ソリューションのテスト用にいくつかの余分なノードを追加した実用的なソリューションを紹介します。

var rows = $(".tableclass table tbody tr") 
 
rows.each(function() { 
 
    var trclass = $(this).find("td:first-child").html(); 
 
    $(this).addClass(trclass); 
 
    var dupeRows = rows.filter("." + trclass); 
 
    rows.filter("." + trclass).not(":first").remove(); 
 
    if (dupeRows.length > 1) { 
 
    rows.filter("." + trclass).first().append('<td>' + $(dupeRows[dupeRows.length - 1]).find("td:nth-child(3)").html() + '</td>'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tableclass"> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td>id1</td> 
 
     <td>something else</td> 
 
     <td>1</td> 
 
     </tr> 
 
     <tr> 
 
     <td>id2</td> 
 
     <td>something else</td> 
 
     <td>2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>id2</td> 
 
     <td>something else</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>id3</td> 
 
     <td>something else</td> 
 
     <td>4</td> 
 
     </tr> 
 
     <tr> 
 
     <td>id1</td> 
 
     <td>something else</td> 
 
     <td>5</td> 
 
     </tr> 
 
     <tr> 
 
     <td>id2</td> 
 
     <td>something else</td> 
 
     <td>5</td> 
 
     </tr> 
 
     <tr> 
 
     <td>id2</td> 
 
     <td>something else</td> 
 
     <td>8</td> 
 
     </tr> 
 
     <tbody> 
 
    </table> 
 
    <div> 
 
    ;