finde das erste Vorkommen der Klasse in div

Lesezeit: 3 Minuten

Amit

Ich habe die folgende HTML-Struktur, ich möchte das innere HTML des ersten div mit der Klasse als “popcontent” mit jQuery finden

<div>
<div class="popContent">1</div>
<div class="popContent">2</div>
</div>

Du wirst dich selbst treten….. 🙂

$(".popContent:first").html()

Beachten Sie, dass :first Kann ich nicht benutzen querySelectorAll()also fragt es alle Elemente ab und ruft dann das erste ab, was zu einer schlechten Leistung führen kann, wenn die Anzahl der Elemente groß ist.

– BenMorel

6. September 2018 um 18:33 Uhr

Hitesh Modha

erstes Auftreten der Klasse in div

$('.popContent').eq(0).html('value to set');

Zweites Auftreten der Klasse in div

$('.popContent').eq(1).html('value to set');

Dies ist zwar nicht falsch, aber nicht optimal. Dadurch werden alle ausgewählt .popContent, und schneiden Sie ein Element. Moderne Browser können querySelector verwenden, um nur das erste Element in einem Durchgang auszuwählen (Ja, der Browser wählt immer noch alle aus, aber die Arbeit ist trotzdem viel schneller)

– Martijn

29. Juni 2015 um 12:14 Uhr
Was ist der schnellste Weg, um ein bestimmtes Element aus dom @Martijn zu extrahieren

– Hitesh Modha

29. Juni 2015 um 12:17 Uhr
Ohne Benchmarking sollte dies gut funktionieren: Wenn ein übergeordnetes Element mit einer ID geschlossen wird: $('#the_id').find('.popContent:first')ansonsten nur die derzeit akzeptierte Antwort.

– Martijn

29. Juni 2015 um 12:36 Uhr
Es ist keine große Verbesserung, aber wenn Sie dies auf einer Website implementieren, werden Sie viel mehr bemerken

– Martijn

29. Juni 2015 um 12:38 Uhr
Entsprechend der :erste Selektordokumentation, da :first ist eine jQuery-Erweiterung und nicht Teil der CSS-Spezifikation, Abfragen mit :first kann die Leistungssteigerung des nativen DOM nicht nutzen querySelectorAll() Methode. Es ist also leistungsmäßig ziemlich gleichwertig zu .eq(0).

– BenMorel

6. September 2018 um 18:31 Uhr

Sie können verwenden :first Selektor in diesem Fall

$('.popContent:first').text();

DEMO

$("div.popContent:first").html()

sollte Ihnen den Inhalt des ersten div geben (“1” in diesem Fall)

Du könntest benutzen document.querySelector()

Gibt das erste Element innerhalb des Dokuments zurück (unter Verwendung des Tiefen-First-Vorordnungsdurchlaufs der Knoten des Dokuments|durch das erste Element im Dokument-Markup und Iteration durch sequenzielle Knoten in der Reihenfolge der Anzahl der untergeordneten Knoten), das mit der angegebenen Gruppe von Selektoren übereinstimmt.

Da es nur nach dem ersten Vorkommen sucht, hat es eine bessere Leistung als jQuery

var count = 1000;
var element = $("<span>").addClass("testCase").text("Test");
var container = $(".container");
var test = null;
for(var i = 0; i < count; i++) {
	container.append(element.clone(true));
}

console.time('get(0)');
test = $(".testCase").eq(0);
console.timeEnd('get(0)');
console.log(test.length);

console.time('.testCase:first');
test = $(".testCase:first");
console.timeEnd('.testCase:first');
console.log(test.length);

console.time('querySelector');
test = document.querySelector(".testCase");
console.timeEnd('querySelector');
console.log(test);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

jsFiddle-Version des Ausschnitts

Manashvi Birla

Verwenden Sie die Jquery: erster Selektor Wie unten :

$(".popContent:first");

Dan Schläge

$("div.popContent:first").html();

9946700cookie-checkfinde das erste Vorkommen der Klasse in div

#Abfrage