поиск конкретных непосредственных потомков элемента с использованием прототипа - PullRequest
Новая
       12

поиск конкретных непосредственных потомков элемента с использованием прототипа

2 голосов
/ 02 июня 2010

Следующая структура 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>

Ответы [ 2 ]

10 голосов
/ 02 июня 2010

Вы бы сделали что-то очень похожее функционально на jQuery (1-й пример), хотя в Prototype нет метода filter, у него есть еще два общих метода: findAll и grep. Здесь вы можете использовать оба. grep как объяснено здесь : 

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

или findAll: 

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 работает по-другому, это облом.

1 голос
/ 02 июня 2010

если ваш ul имеет идентификатор 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 должен быть эквивалентом $$(), но, очевидно, это не так. Для меня это похоже на ошибку в Prototype ...

Это работает, но, кажется, не имеет большого значения ... 

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