Question

在我的代码中，我使用querySelectorAll来创建nodeList。

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

这个数组包含~17个元素，我希望能够在childNode具有某个类的情况下过滤这些结果。

我目前正在使用a[0].childNodes，但这只会显示所有孩子。我只希望它返回包含类.P-xs

的特定组件

Answer 1

您可以使用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 2

According to this，您应该可以致电a[0].querySelectorAll('.P-xs')

Answer 3

您可以在初始查询选择器结果上使用for循环来创建仅包含具有给定后代的元素的数组。请参阅下面的示例。

＆＃13;

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';
});

＆＃13;

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

＆＃13;

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');
    });
});

Javascript按CSS类过滤childNodes

4 个答案: