使用原型查找元素的特定直接子元素

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-class的直接孩子？

在jQuery中我会写这样的东西:

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

我如何使用Prototype？

我试过以下......

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

...但它确实完全相反,并返回一个内部 <li>

Answer 1

你会在jQuery(第一个例子)中做一些非常类似的功能,虽然Prototype没有filter方法,但它有两个更通用的方法:findAll和grep.在这里,你可以使用两者.作为grep的解释在这里:

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的工作方式不同,那就太糟糕了.