So fügen Sie mit jQuery eine Klasse zum ersten div hinzu.

Ich habe versucht, folgenden Code zu verwenden, funktioniert aber nicht für mich. Vielleicht fehlt mir etwas.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script>
$('.item')
    .eq(0).addClass('first').end()
    .eq(-1).addClass('last').end();
</script>
<style type="text/css">
.first, .last{
background-color:#0099FF;
}
</style>
</head>
<body>
<div class="item">aaa</div>
<div class="item">bbb</div>
<div class="item">ccc</div>
<div class="item">ddd</div>
<div class="item">eee</div>
</body>
</html>

Edit: Danke an alle, gibt es überhaupt eine Klasse, um den restlichen DIVs eine Klasse hinzuzufügen?

2
Zim3r 9 Okt. 2012 im 14:43

10 Antworten

Beste Antwort

Sie führen den Code aus, bevor das Markup fertig ist. Wickeln Sie den Code ein

// document ready short-style
$(function() {

});
5
Peter Pajchl 9 Okt. 2012 im 10:46

Siehe jsfiddle hier

$(document).ready(function() {
    $('div:first').addClass('first');
});
1
Devnegikec 9 Okt. 2012 im 10:50

Du benutzt diesen Code

$(function(){
   $(".item:first-child").addClass("anyclass");
})

or
  $("div:first-child").addClass("anyclass");
2
Saeed 9 Okt. 2012 im 10:58

Versuchen

$(document).ready(function() {
  $('.item:first-child').addClass('first');
});
5
Andy 9 Okt. 2012 im 10:58

Versuche dies

JS-CODE

$(document).ready(function(){
   $('div.item')
     .eq(0).addClass('first').end()
     .eq(-1).addClass('last').end();
});

DEMO

Hinweis

Sie müssen $(function() { ... }) verwenden, um den gesamten jQuery-Code zu verpacken.

1
Codegiant 9 Okt. 2012 im 10:58

Ihr Code sollte ausgeführt werden, wenn das DOM vollständig geladen ist. Verwenden Sie also $ (document) .ready ().

Das Skript kann ausgeführt werden, sobald die DOM-Hierarchie vollständig erstellt wurde. Der an .ready () übergebene Handler wird garantiert ausgeführt, nachdem das DOM bereit ist. Daher ist dies normalerweise der beste Ort, um alle anderen Ereignishandler anzuhängen und anderen jQuery-Code auszuführen.

Lesen Sie mehr über $ (document) .ready ().

Überprüfen Sie den Code unten. Es wird Ihnen helfen, das zu erledigen, was Sie wollen.

   $(document).ready(function() {
          $('.item').first().addClass('first');
        });

Andernfalls wird Ihr js ausgeführt, noch bevor das DOM geladen wird

$(".item:first").addClass('first'); funktioniert auch gut.

Probieren Sie auch die Demo aus.

Hoffe das wird dir helfen. Wenn Sie Fragen haben, zögern Sie bitte nicht zu fragen. Vielen Dank

2
Techie 9 Okt. 2012 im 10:59
$(".item :first").addClass('first');
2
Darren 9 Okt. 2012 im 10:45

Hier ist der jQuery-Code

<script>
$(document).ready(function(){
$('body .item:first').addClass('YOUR CLASS VALUE');
});
<script>

Grüße, http://www.santoshkori.com

1
Santosh Kori 10 Okt. 2012 im 10:55

Sie können immer direktes CSS verwenden, obwohl es sich um CSS3 handelt. Z.B. Sie könnten Ihr aktuelles CSS ersetzen durch:

.item:nth-of-type(1), .item:nth-of-type(3)
{
   background-color:#0099FF;
}

Wenn Sie nur jQuery möchten, können Sie Folgendes versuchen:

$('.item:first').addClass('first');
$('.item:last').addClass('last');
1
Phil 9 Okt. 2012 im 10:56

Ihr Code ist korrekt, wird jedoch ausgeführt, bevor das DOM bereit ist. Verschieben Sie das <script></script> in die letzte Zeile vor </body>.

Um den restlichen Elementen eine Klasse hinzuzufügen, können Sie dies tun (über VisioNs comment)

$(".item:not(:first,:last)").addClass("differentClass");
3
Community 23 Mai 2017 im 12:01