die Suche nach bestimmten unmittelbar untergeordneten Elemente eines Elements mit Prototyp

Folgende DOM-Struktur:

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

Vorausgesetzt, ich habe die äußere <ul> im $ul. Wie bekomme ich die zwei unmittelbare Kinder, die die item-Klasse?

In jQuery ich würde etwas schreiben wie dieses:

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

Wie kann ich diese mit Prototyp?

Ich habe Folgendes versucht ...

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

... aber es tut, tut genau das Gegenteil und gibt die eine innere <li>

InformationsquelleAutor naltatis | 2010-06-02
  1. 10

    Würden Sie tun etwas sehr ähnlich, funktionell, jQuery (1. Beispiel), obwohl der Prototyp nicht über ein filter Methode, es hat zwei weitere generische Methoden: findAll und grep. Hier können Sie beides verwenden. grep erläutert hier:

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

    oder findAll:

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

    Und hier ist ein Beispiel: http://jsfiddle.net/RuBzq/.

    Was du versucht hast (ul.select("> .item")) nicht funktioniert, da der Selektor nur tests Nachkommen von ul. Da ul unbekannt ist der Selektor, > startet nicht von ul aber aus den Elementen unter ihm. Also ist alles, das ist nicht ein unmittelbarer Nachkomme von ul entsprechen ul.select('> *') zum Beispiel. Und das ist, warum ul.select('> .item') nur Spiele .items sind Nachkommen von etwas innerhalb der set -. Wenn jQuery funktioniert anders, das ist ein Mist.

    • Klingt gut, werde ich versuchen, die grep-Lösung. Danke!
    • vielen Dank @Alsciende, dein Tipp mit grep() meinen Tag gerettet 🙂
    InformationsquelleAutor Alsciende
  2. 1

    wenn Ihr ul id Foo Sie könnten dies tun:

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

    Seltsam genug, keine dieser arbeiten..

    $('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 werden soll, den Gegenwert von $$(), aber eindeutig ist es nicht. Scheint ein bug in Prototype zu mir...

    Das funktioniert, aber scheint wenig Wert...

    $('foo').up().getElementsBySelector('#foo>.item').each(function(s,i) { alert(s.innerText); });
    • Es ist kein bug. Sie können nicht > diese Weise in Prototyp, siehe meine Antwort. Und getElementsBySelector ist veraltet, zu Gunsten von Element#wählen.
    InformationsquelleAutor Matthew Smith
Schreibe einen Kommentar