Mittwoch, Januar 29, 2020

Javascript (jQuery): next() gibt mir “li.next()“ statt „li“

Verwirrenden Titel, huh? Ich versuchte zu erklären, so gut ich konnte.

Was ich meine ist, wenn ich ein Menü wie dieses:

<ul>
    <li> Home </li>
    <li class="current"> Portfolio </li>
    <li> Store </li>
    <li> About </li>
</ul>

und verwenden die .next () – Methode auf, um das nächste element AUS der aktuellen:

$('ul li.current').next()

das Ergebnis Selektor ist:

ul li.current.next()

anstatt einen richtigen Selektor. Ich meine, ich kann es nicht Ziel ul li.current.next() mit CSS (und daher ist es nicht eine „echte“ Auswahl). Die real-Selektor Aussehen würde ul li.

Gibt es eine Möglichkeit, um die „echten“ Wähler das nächste element?

  • können Sie zeigen mehr js als das?
  • Was ist das problem? Wollen Sie bekommen eine gleichwertige CSS-Selektor?
  • Wenn Sie var test = $('#ul li'); alert(test.html()); test = test.next(); alert(test.html()); funktioniert es wie erwartet? Ich denke dein Selektor ist zu schmal, um korrekt zu arbeiten.
InformationsquelleAutor qwerty | 2011-05-09

3 Kommentare

  1. 2

    Wenn Sie möchten, die äquivalente CSS-Selektor, wäre es:

    ul li.current + li

    Finden Sie unter: Adjacent sibling selector

    Hinweis: Nicht unterstützt IE6.

    Beachten Sie auch, dass jQuery nicht mit CSS-Selektoren mit allen Elementen. Die Selektor-syntax ist nur ähnlich (es ist eine Obermenge) zu CSS, da es schien die natürlichste Art und Weise. Es nutzt Methoden des Browsers (z.B. querySelectorAll), wo es kann, aber es muss auch traverse den DOM, um zu finden, die Elemente.

    E. g. Sie können nie mit $('td').closest('tr') mit CSS, wie Sie nicht „nach oben“ mit CSS.

    Ich hoffe, Ihre Frage damit beantwortet, wenn nicht, bitte klären Sie es.

    • das ist cool, wusste nicht, könnten Sie das noch lernen, css, obwohl haha ie6 bahh
    • Es stellt sich heraus, ich brauchte nicht, es zu tun auf diese Weise, aber ich musste noch wissen, wie es zu tun, und Ihre Lösung gearbeitet. Danke! (und ich hörte Unterstützung von IE6 Monate her, also keine sorgen!)
  2. 0

    Dies funktioniert:

    $(document).ready(function() {
      var $li = $("ul li.current").next();
      $li.css("font-weight", "bold");
    });

    Oder Sie können überspringen Sie die var-Belegung und aufrufen wie diesem:

    $("ul li.current").next().css("text-decoration", "underline");

Kostenlose Online-Tests