javascript - 使用原型(prototype)查找元素的特定直接子元素

Question

以下 DOM 结构:

<ul>
  <li class="item">yes</li>
  <li>no</li>
  <li class="item">yes</li>
  <li>
    <ul>
      <li class="item">no</li>
    </ul>
  </li>
</ul>

假设我有外部 <ul>在$ul .我如何获得具有 item 的两个直系子级 -类？

在 jQuery 中我会这样写:

$ul.children().filter(".item")
$ul.children(".item")
$ul.find("> .item")

如何使用 Prototype 实现这一点？

我尝试了以下...

$ul.select("> .item") //WRONG

...但它做的恰恰相反并返回一个内部 <li>

Answer 1

虽然 Prototype 没有 filter 方法，但它有两个更通用的方法:findAll 和 grep。在这里，您可以同时使用两者。 grep 说明 here :

var items = ul.childElements().grep(new Selector('li.item'));

或查找所有:

var items = ul.childElements().findAll(function (elt) {
  return elt.match('li.item');
});

这是一个例子:http://jsfiddle.net/RuBzq/ .

您尝试的 (ul.select("> .item")) 不起作用，因为选择器仅测试 ul 的后代。由于选择器不知道 ul，因此 > 不是从 ul 开始，而是从它下面的元素开始。因此，不是ul 的直接后代的所有内容都将匹配 ul.select('> *')。这就是为什么 ul.select('> .item') 只匹配.items 在集合中的后代。如果 jQuery 的工作方式不同，那就太可惜了。