Question

我有一个NodeList对象-比方说，由$ element.children返回-我想通过CSS3选择器对其进行过滤，只剩下满足我条件的某些元素。该函数基本上应如下所示：

var filter = (function($elementsToFilter, selector){
   var $elementsFiltered;
   // ...?
   return $elementsFiltered;
});
filter(document.querySelector('#element').children, '.two.three')

<div id="element">
   <div class="one two three">Yes</div>
   <div class="two three">Yes</div>
   <div class="two">No</div>
   <div class="three">No</div>
</div>

这可能对生产没有帮助（不良做法）吗？
在“过滤器”功能中以“是”动态选择元素的最快方法是什么？

请注意，我不是在寻找框架解决方案，例如在jQuery中。预先感谢！

Answer 1

问题1：

我不使用/** * @brief Creates a %vector with no elements. * @param __a An allocator object. */ explicit vector(const allocator_type& __a) _GLIBCXX_NOEXCEPT : _Base(__a) { } 想到的最有效的方法是在Element.classList上使用document.querySelector()函数。

contains()

或者，您可以像下面这样将选择器合并为一个：

for (elem in document.getElementById('element').children) {
  if (elem.classList.contains('two') && elem.classList.contains('three')) {
     // Do something
  }
}

问题2：

如果您控制生成此HTML的服务器端代码，则可能会发现使用这样的data属性更加容易：

for (elem in document.querySelector('#element > .two.three')) {
  // Do something
}

然后使用与问题1类似的选项：

<div id="element">
  <div class="one two three" data-select>Yes</div>
  <div class="two three" data-select>Yes</div>
  <div class="two">No</div>
  <div class="three">No</div>
</div>

在这里（ref）需要对for (elem in document.getElementById('element').children) { if (elem.dataset.select !== undefined) { // Do something } }进行显式检查。

undefined

顺便说一句，javascript现在具有Array.filter()功能。您可以将其与Array.from()一起使用以替换自制软件for (elem in document.querySelector('#element > [data-select]') { // Do something }的功能（示例取自我的第一个代码段）：

filter

或创建一个let filtered = Array.from(document.getElementById('element').children).filter(elem => { return elem.classList.contains('two') && elem.classList.contains('three'); });函数：

filterByClasses

通过CSS3选择器过滤NodeList

1 个答案:

问题1：

问题2：