So erhalten Sie das n-te jQuery-Element

311

Gibt in jQuery $("...").get(3)das 3. DOM-Element zurück. Was ist die Funktion, um das 3. jQuery-Element zurückzugeben?

jquery Sam Lee
quelle

Antworten:

310

Warum nicht zuerst die (kurze) Auswahlseite durchsuchen?

Hier ist es: die :eq() Bediener. Es wird genauso verwendet get(), gibt aber das jQuery-Objekt zurück.

Oder Sie können auch die .eq()Funktion verwenden.

Dykam
quelle
23
Soll das nicht .eq()stattdessen sein :eq()?
RubenGeert
15
Ja, .eq()ist besser für die Frage des OP geeignet. :eq()wird innerhalb des Zeichenfolgenparameters to verwendet $, während .eq()es sich um eine Methode für ein vorhandenes jQuery-Objekt handelt.
mjswensen
55
Ich schwöre, ich muss das alle nachschlagen . Single . Zeit .
ivarni
3
@JoelWorsham Hängt vom gewünschten Verhalten ab. $('select').find('option').eq(n)ignoriert grundsätzlich die Gruppierung und erhält alle Optionen als Ganzes. Wenn Sie es pro Gruppe wollen, ist so etwas notwendig:$('select').find('optgroup').each(function() { $(this).find('option').eq(n)...; })
Dykam
4
"Warum nicht zuerst die (kurze) Auswahlseite durchsuchen?" - Weil "eq" ein sehr schlechter Name ist und ich ihn regelmäßig überspringe, da eq für mich Vergleich bedeutet ....
mmlac
309

Sie können den : eq- Selektor verwenden, zum Beispiel:

$("td:eq(2)").css("color", "red"); // gets the third td element

Oder die Funktion eq (int) :

$("td").eq(2).css("color", "red");

Denken Sie auch daran, dass die Indizes auf Null basieren.

CMS
quelle
7
Als Synonym können Sie auch den :nth()Selektor verwenden - nicht zu verwechseln mit:nth-child()
user123444555621
Die bessere Antwort und 3 Jahre später nicht bearbeitet :)
Andrew
Vielen Dank, dass Sie tatsächlich erklärt haben, wie Sie den Selektor / die Funktion verwenden
Joseph Rogers
49

Wenn Sie die Kontrolle über die Abfrage haben, die das jQuery-Objekt erstellt, verwenden Sie :eq()

$("div:eq(2)")

Wenn Sie keine Kontrolle darüber haben (z. B. wenn es von einer anderen Funktion oder etwas anderem übergeben wird), verwenden Sie .eq()

var $thirdElement = $jqObj.eq(2);

Oder wenn Sie einen Abschnitt davon möchten (z. B. das dritte, vierte und fünfte Element), verwenden Sie .slice()

var $third4th5thElements = $jqObj.slice(2, 5);
nickf
quelle
Ich suchte nach Slice, war mir aber nicht sicher, wie ich suchen sollte. Vielen Dank, dass Sie über die Anforderungen der ursprünglichen Frage hinausgehen.
Samik R
4
Für Leute, die über diese Antwort stolpern, ist es hilfreich zu beachten, dass der n-te Kind-Selektor auf 1 basiert, während: eq oder .eq () auf 0 basieren
Sudhanshu Mishra
1
Sie sollten .eq()anstelle von :eq()tatsächlich verwenden. Leichte Leistungssteigerung.
Qwerty
13

Ich denke, Sie können dies verwenden 

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

Es findet das zweite li in jeder übereinstimmenden ul und notiert es.

JoenasE
quelle
11

.eq () - Eine Ganzzahl, die die 0-basierte Position des Elements angibt.

Ex:

Betrachten Sie eine Seite mit einer einfachen Liste:

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>

Wir können diese Methode auf die Liste der Listenelemente anwenden:

$( "li" ).eq( 2 ).css( "background-color", "red" );

Für weitere Informationen: .eq ()

Tilak
quelle
3

Wenn Sie das jquery-Objekt bereits in einer Variablen haben, können Sie es auch einfach als normales indiziertes Array behandeln, ohne jquery zu verwenden:

var all_rows = $("tr");
for(var i=0; i < all_rows.length; i++){
   var row = all_rows[i];
   //additionally, you can use it again in a jquery selector
   $(row).css("background-color","black");
}

Obwohl das obige Beispiel in keiner Weise nützlich ist, zeigt es, wie Sie von jquery erstellte Objekte als indizierte Arrays behandeln können.

Au.Merci
quelle
Richtig, und noch ein (hoffentlich nützlicher) Hinweis: Wenn die Zeile eine Liste von <select>Elementen enthält und Sie das ausgewählte Combobox-Element möchten, verwenden Sie$(row).val();
Matt
2

Wenn ich Ihre Frage richtig verstehe, können Sie die get-Funktion immer wie folgt umbrechen:

var $someJqueryEl = $($('.myJqueryEls').get(3));
user1205577
quelle
3
Dies ist nur der "harte Weg" und das eq()gibt Ihnen kostenlos.
Caumons
1

Wenn Sie ein bestimmtes Element / einen bestimmten Knoten oder ein bestimmtes Tag in einer Schleife abrufen möchten, z

<p class="weekday" data-today="monday">Monday</p>
<p class="weekday" data-today="tuesday">Tuesday</p>
<p class="weekday" data-today="wednesday">Wednesday</p>
<p class="weekday" data-today="thursday">Thursday</p>

Wenn also die obige Codeschleife ausgeführt wird und wir möchten, dass ein bestimmtes Feld ausgewählt wird, müssen wir die jQuery-Auswahl verwenden, die nur das erwartete Element aus der obigen Schleife auswählen kann, so dass Code sein wird

$('.weekdays:eq(n)');

z.B

$('.weekdays:eq(0)');

sowie durch andere Methode

$('.weekday').find('p').first('.weekdays').next()/last()/prev();

Die erste Methode ist jedoch effizienter, wenn sie HTML <tag>einen eindeutigen Klassennamen hat.

ANMERKUNG: Die zweite Methode wird verwendet, wenn im Zielelement oder Knoten kein Klassenname vorhanden ist.

Weitere Informationen finden Sie unter https://api.jquery.com/eq/.

Vrushal Raut
quelle
0

Für Iterationen mit einem Selektor scheint dies jedoch keinen Sinn zu ergeben:

var some = $( '...' );

for( i = some.length -1; i>=0; --i )
{
   // Have to transform in a jquery object again:
   //
   var item = $( some[ i ] );

   // use item at will
   // ...
}

quelle
0

Live-Beispiel für den Zugriff auf und das Entfernen des N-ten Elements mit jQuery:

<html>
<head></head>
<body>
    <script type="text/javascript" 
    src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('li:eq(1)').hide();
      });
    </script>
    <ol>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ol>
</body>
</html>

Wenn es ausgeführt wird, werden in der geordneten Liste zwei Elemente angezeigt: Erstes und Drittes. Der zweite war versteckt.

Eric Leschinski
quelle
PS: Die Zählung beginnt bei 0; Erstens ist bei Index 0, zweitens ist bei Index 1 und so weiter ....
KNU
0 
 $(function(){
            $(document).find('div').siblings().each(function(){
                var obj = $(this);
                obj.find('div').each(function(){
                    var obj1 = $(this);
                    if(!obj1.children().length > 0){
                        alert(obj1.html());
                    }
                });

            });
        });

<div id="2">
    <div>
        <div>
            <div>XYZ Pvt. Ltd.</div>
        </div>
    </div>
</div>
<div id="3">
    <div>
        <div>
            <div>ABC Pvt Ltd.</div>
        </div>
    </div>
</div>
Sanjay Verma
quelle
"$ (function () {" Im ersten Herbst habe ich eine anonyme Funktion erstellt, die automatisch ausgelöst wurde. Darin fand ich drei Eltern-Div mit Geschwistern. Dann iterierte ich in allen 3 Eltern-Div und überprüfte die Länge jeder Kinderlänge. Wie ich feststellen kann, ob es sich um ein letztes Div im übergeordneten Div handelt oder nicht. Jetzt alarmiere ich das letzte Div-HTML aller 3 Haupt-übergeordneten Div.
Sanjay Verma
Sie können Ihre Antwort bearbeiten , anstatt Informationen in Kommentaren
anzugeben