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")

我如何使用原型？

我尝试了以下内容......

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

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

Answer 1

你会做一些非常类似于jQuery（第一个例子）的功能，虽然Prototype没有filter方法，但它有两个更通用的方法：findAll和{{1} }。在这里，你可以使用两者。 grep如解释here：

grep

或findAll：

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

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

您尝试的内容（var items = ul.childElements().findAll(function (elt) { return elt.match('li.item'); });）不起作用，因为选择器仅测试ul.select("> .item")的后代。由于选择器不知道ul，ul不是从>开始，而是从其下的元素开始。因此，不 ul的直接后代的所有内容都将匹配ul。这就是ul.select('> *')仅匹配ul.select('> .item')作为集合中的后代的原因。如果jQuery的工作方式不同，那就太糟糕了。

Answer 2

如果你的ul的id为Foo，你可以这样做：

var els = $$('#foo>.item').each(function(s,i) { alert(s.innerText); });

奇怪的是，这些都不起作用..

$('foo').getElementsBySelector('>.item').each(function(s,i) { alert(s.innerText); });
// As you say it returns the 'no' list item. Taking off the '>' doesn't work either.

$('foo').getElementsBySelector('.item').each(function(s,i) { alert(s.innerText); });
// returns all three

$('foo').up().getElementsBySelector('>.item').each(function(s,i) { alert(s.innerText); });
// returns all three

getElementsBySelector应该相当于$$()，但显然不是。{1}}。看起来像Prototype中的一个bug给我......

这有效，但似乎没什么价值......

$('foo').up().getElementsBySelector('#foo>.item').each(function(s,i) { alert(s.innerText); });

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

2 个答案: