使用jQuery從陣列

Question

說我有看起來像這樣的HTML元素的數組選擇...

var info = [<tr>...</tr>, <tr class="name">...</tr>, <tr class="colour">...</tr>] 

如果我只是想從陣列info選擇該類name，我該怎麼辦這與jQuery？我期望像下面這樣的工作：

$([info, '.name:first']); 

但它沒有。我在這裏得到一些小細節錯誤，或者你可以簡單地不選擇數組與jQuery？

Answer 1

可以使用的jQuery第二個參數：

var filtered = $('.name:first', info); 

這相當於：

var filtered = $(info).find('.name:first'); 

如果選擇器需要找到頂層元素，存儲在數組中，然後使用過濾器：

var filtered = $(info).filter('.name:first') 

Answer 2

假設Array的內容是真正的元素節點， ñ它會更容易簡單地使用Array.prototype.filter()和Element.matches()：

var items = Array.from(document.querySelectorAll('tr')), 
 
    test = items.filter(row => row.matches('tr.test')); 
 
console.log(test);

<table> 
 
    <tbody> 
 
    <tr class="colour"></tr> 
 
    <tr class="colour"></tr> 
 
    <tr class="colour"></tr> 
 
    <tr class="test"></tr> 
 
    </tbody> 
 
</table>

上面段使用的（新-ISH）箭函數的語法，這是等效於以下：

var items = Array.from(document.querySelectorAll('tr')), 
 
    test = items.filter(function(row){ 
 
     return row.matches('tr.test'); 
 
    }); 
 
console.log(test);

<table> 
 
    <tbody> 
 
    <tr class="colour"></tr> 
 
    <tr class="colour"></tr> 
 
    <tr class="colour"></tr> 
 
    <tr class="test"></tr> 
 
    </tbody> 
 
</table>

Element.matches()根據提供的CSS選擇器測試元素（Element），如果提供的選擇器匹配Element，則返回布爾型true，否則返回false。

Array.from()將從document.querySelectorAll()返回到Array的陣列狀收集的結果，爲了使用陣列的方法，如Array.prototype.filter()，它保留在其中所提供的評估返回true/truthy值的陣列的那些元素。

參考文獻：

• Array.from()。
• Array.prototype.filter()。
• document.querySelectorAll()。
• Element.matches()。