7

假设我有一个基于任何DOM 元素的数组 selector

var elems = document.querySelectorAll(selector);

我不知道 中包含什么elems，但让我们假设elems.length > 0

我想使用 querySelectorAll （或一些等效函数）elems来查找与附加选择器匹配的所有元素。

// example: find all buttons with class `foo` within `elems` array
var buttons = elems.querySelectorAll("button.foo");

这不起作用（出于明显的原因），但我不确定如何做到这一点:(

这是我创建的包装器，用于处理@Tibos 接受的答案

// Element.matches wrapper
(function(e){
  if (typeof e.matches !== "function") {
    e.matches = e.webkitMatchesSelector ||
                e.mozMatchesSelector    ||
                e.msMatchesSelector     ||
                e.oMatchesSelector      ||
                e.matchesSelector;
  }
})(Element.prototype);
4

4 回答 4

8

您可以使用该Element#matches方法过滤掉您的原始列表：

var elems = document.querySelectorAll(selector);
var buttons = Array.prototype.filter.call(elems, function(elem){ 
  return elem.matches('button');
});

请注意，您可以在各种名称下找到此方法，您可能希望在它们周围包装一个函数。（请检查文档！）

document.querySelectorAll另一种可能性是使用两个选择器获取返回的两组元素的交集。两组的交集有多种实现方式，请随意使用您喜欢的一种。这个问题提供了一些想法。

于 2014-02-18T18:08:03.207 回答
1

只要matches不是更标准，这是我的看法。

function getElementsFromParents(parentSelector, childSelector) {
    var elems = document.body.querySelectorAll(parentSelector);
    return Array.prototype.reduce.call(elems, function matcher(arr, el) {
        var matches = el.querySelectorAll(childSelector);
        if (matches.length) Array.prototype.forEach.call(matches, function pusher(item) {
            arr.push(item);
        });
        return arr;
    }, []);
}
于 2014-05-25T22:07:52.677 回答
1

querySelectorAll返回一个 NodeList 结构，因此我们更改为数组列表，我们可以使用函数映射。

  var lines = Array.prototype.slice.call(document.querySelectorAll(selector));
  var paths = lines.map(function(elem){ 
    return elem.querySelector('button');
  });
于 2017-05-07T22:56:20.513 回答
-1

如果我能得到你，这就是你要找的correct！

查看工作演示

于 2014-02-18T18:15:46.643 回答