Javascript Filter childNodes by CSS Класс

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