如何獲取全部下一個<tr>數據ID上點擊一個<tr>（選擇TR）

Question

我想所有tr的data-id在一個數組中。我使用這段代碼，但這不是一個好代碼。

var ids = Array.prototype.slice.call($("tr.selected").nextAll('tr')); 
alert(ids) 
.map(function (tr) { 
    return tr.getAttribute('data-id') 
}); 

Answer 1

使用jQuery map()和get()方法

// iterate over elements using map and generate array elelements 
var res = $("tr.selected").nextAll('tr').map(function(){ 
    // get data attribute value 
    return $(this).data('id'); 
    // get the result object as an array using get method 
}).get(); 

---

如果你想獲得的所有兄弟姐妹的屬性值，然後使用siblings()方法來代替。

var res = $("tr.selected") 
    // get all sibling tr  
    .siblings() 
    // iterate over elements using map and generate array elelements 
    .map(function(){ 
    // get data attribute value 
    return $(this).data('id'); 
    // get the result object as an array using get method 
}).get(); 

Answer 2

事實上，代碼可能看起來像：

var ids = $('tr.selected').nextUntil('.selected').map(function() { 
    return $(this).data('id'); 
}).get(); 

所以作爲演示，請看下面的例子：

$('tr.selected').each(function() { 
 
    var ids = $(this).nextUntil('.selected').map(function() { 
 
    return $(this).data('id'); 
 
    }).get(); 
 

 
    console.log(ids); 
 
});

.selected { 
 
    background: #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table border="1"> 
 
    <tr data-id="1"><td>Row 1</td></tr> 
 
    <tr data-id="2" class="selected"><td>Row 2</td></tr> 
 
    <tr data-id="3"><td>Row 3</td></tr> 
 
    <tr data-id="4"><td>Row 4</td></tr> 
 
    <tr data-id="5" class="selected"><td>Row 5</td></tr> 
 
    <tr data-id="6"><td>Row 6</td></tr> 
 
    <tr data-id="7"><td>Row 7</td></tr> 
 
</table>