Javascript過濾CSS類的childNodes

Question

在我的代碼中，我使用querySelectorAll來創建nodeList。

var a = document.querySelectorAll('tbody > tr.editable:not(.empty-bench)') 

此數組包含~17個元素，我希望能夠過濾這些結果，其中childNode具有某個類。

我目前使用a[0].childNodes但這只是顯示所有的孩子。我只希望它返回一個包含類.P-xs

Answer 1

According to this具體的，你應該能夠再調用a[0].querySelectorAll('.P-xs')

Answer 2

您可以使用Function.prototype.call借用Array.prototype.filter並能夠用它在你的NodeList：

var a = document.querySelectorAll('tbody > tr.editable:not(.empty-bench)'); 
var b = [].filter.call(a, function(el) { 
    return el.classList.contains('P-xs'); 
}); 

Answer 3

您可以在您的初始查詢選擇器結果上使用for循環來創建一個只包含具有給定後代的元素的數組。看下面的例子。

var a = document.querySelectorAll('#one'); 
 
var b = []; 
 
for (var i = 0; i < a.length; i++) { 
 
    if (a[i].querySelectorAll('#two').length) { 
 
    b.push(a[i]); 
 
    } 
 
} 
 
b.forEach(function (item, i, array) { 
 
    item.style.color = 'red'; 
 
});

<div id="one"> 
 
    One 
 
</div> 
 

 
<div id="one"> 
 
    <div id="two">Two</div> 
 
</div>

Answer 4

如果你正在尋找childNode包含然後P-xs類試試這個。它將返回具有該類的所有子節點的數組。

var a = document.querySelectorAll('tbody > tr.editable:not(.empty-bench)'); 
var afterFilter = [].concat.apply([], [].map.call(a, function (el) { 
    return [].filter.call(el.childNodes, function (ch) { 
     return ch.nodeType === 1 && ch.classList.contains('P-xs'); 
    }); 
})); 

但是如果你想那麼家長嘗試如下：

var a = document.querySelectorAll('tbody > tr.editable:not(.empty-bench)'); 
var afterFilter = [].map.call(a, function(el) { 
    return [].filter.call(el.childNodes, function (ch) { 
     return ch.nodeType === 1 && ch.classList.contains('spec'); 
    }); 
});