trouver les enfants immédiats spécifiques d'un élément en utilisant prototype

Question

structure suivante 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> 

En supposant que je l'<ul> externe en $ul. Comment puis-je obtenir le deux enfants qui ont la classe item?

Dans jQuery Je voudrais écrire quelque chose comme ceci:

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

Comment puis-je à cela avec Prototype?

J'ai essayé ce qui suit ...

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

... mais il ne fait exactement le contraire et renvoie le un intérieur<li>

Answer 1

Vous feriez quelque chose de très similaire, fonctionnellement, à jQuery (1er exemple), bien que Le prototype n'a pas de méthode filter, il a deux méthodes plus génériques: findAll et grep. Ici, vous pouvez utiliser les deux. grep comme expliqué here:

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

ou findAll:

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

Et voici un exemple: http://jsfiddle.net/RuBzq/. Ce que vous avez essayé (ul.select("> .item")) ne fonctionne pas car le sélecteur teste uniquement les descendants de . Puisque ul est inconnu pour le sélecteur, > ne commence pas à partir de ul mais à partir d'éléments situés en-dessous. Donc tout ce qui est pas un descendant immédiat de ul va correspondre ul.select('> *') par exemple. Et c'est pourquoi ul.select('> .item') ne correspond qu'à .items qui sont les descendants de quelque chose à l'intérieur de l'ensemble. Si jQuery fonctionne différemment, c'est dommage.

Answer 2

si votre ul a un id de Foo vous pourriez faire:

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

Étrangement, aucun de ces travaux ..

$('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 est censé être l'équivalent de $$(), mais clairement ce n'est pas le cas. On dirait un bug dans Prototype pour moi ...

Cela fonctionne, mais il semble que peu de valeur ...

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