獲取相同變量類的元素值

Question

發表了一個類似的問題，但可能是這種情況會更有意義。有許多第一個td的tr，在不同的tr中有一個重複的第一個td。我正在使用這些進行識別。我想從第二個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，你的問題是，jquery.filter()作品一組給定的DOM元素。因此，您必須首先選擇<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); 
    } 
}); 

更新（更正的代碼）：

如果你要複製的值第一個發生元素爲第二個發生元素，請使用此代碼：

$(".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個td元素。

在下面的解決方案中，我也刪除重複的行，您可以保留/刪除基於您的要求。

這裏是工作的解決方案，我添加了幾個額外的節點來測試解決方案。

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> 
 
    ;