Wie kann ich die ersten N Elemente auswählen?

Ich habe dieses HTML:Wie kann ich die ersten N Elemente auswählen?

<div class="notifications_list"> 
 
\t <div class="title">today <span>+84</span> <i class="fa fa-chevron-down"></i> </div> 
 
\t <ul> 
 
\t \t <li>notification 1</li> 
 
\t \t <li>notification 2</li> 
 
\t \t <li>notification 3</li> 
 
\t </ul> 
 
\t <div class="title">yesterday <span>-10</span> <i class="fa fa-chevron-down"></i> </div> 
 
\t <ul> 
 
\t \t <li>notification 4</li> 
 
\t \t <li>notification 5</li> 
 
\t </ul> 
 
\t <div class="title">in last week <span>+32</span> <i class="fa fa-chevron-down"></i> </div> 
 
\t <ul> 
 
\t \t <li>notification 6</li> 
 
\t \t <li>notification 7</li> 
 
\t \t <li>notification 8</li> 
 
\t \t <li>notification 9</li> 
 
\t \t <li>notification 10</li> 
 
\t </ul> 
 
</div>

Ich brauche eine Hintergrundfarbe für die ersten N Elemente zu setzen. Zum Beispiel N = 4, also möchte ich dies:

Wie Sie sehen, habe ich eine graue Hintergrundfarbe zu ersten 4 <li> Elemente. Wie kann ich das mit jQuery machen?

Quelle

2016-08-29 Martin AJ

Mögliches Duplikat von [Auswahl der ersten "n" Elemente mit jQuery] (http://stackoverflow.com/questions/1865552/selecting-the-first-n-items-with-jquery) – mhodges

mit all diesen Lösungen - eine einzige Note für alle - und das OP. Anstatt das CSS des Elements zu ändern (auf welche Weise auch immer jede Lösung vorschlägt) - eine bessere Lösung ist eine Klasse (zB: .highlight {background-color: #ddd} und dann die von Ihnen gewählte Methode - fügen Sie die Klasse hinzu Das Element - auf diese Weise ändern Sie nicht die CSS-Elemente, sondern fügen eine Klasse hinzu, die leichter manipuliert werden kann (zB das Grau in Gelb ändern) oder entfernt werden kann. Nur meine Meinung. :) – gavgrif

@gavgrif Vielen Dank für die Notiz. –

Sie verwenden, um grau können :lt()DEMO

$('li:lt(4)').css('background', 'lightblue');

alle Elemente auswählen bei einem Index von weniger als Index innerhalb des abgestimmten einstellen.

Quelle

2016-08-29 21:43:10

Nur eine Sache. Wird dieser Ansatz auf alten Browsern wie IE7/8 funktionieren? –

da bin ich mir nicht sicher. –

Dadurch werden die ersten 4 <li> Elemente zurückzukehren und die Hintergrundfarbe

$("li").slice(0,4).css('background-color', 'gray');

Quelle

2016-08-29 21:42:31 Daniel

Wie kann ich die ersten N Elemente auswählen?

Antwort

Verwandte Themen