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?
10 Antworten
Sie führen den Code aus, bevor das Markup fertig ist. Wickeln Sie den Code ein
// document ready short-style
$(function() {
});
Siehe jsfiddle hier
$(document).ready(function() {
$('div:first').addClass('first');
});
Du benutzt diesen Code
$(function(){
$(".item:first-child").addClass("anyclass");
})
or
$("div:first-child").addClass("anyclass");
Versuchen
$(document).ready(function() {
$('.item:first-child').addClass('first');
});
Versuche dies
JS-CODE
$(document).ready(function(){
$('div.item')
.eq(0).addClass('first').end()
.eq(-1).addClass('last').end();
});
Hinweis
Sie müssen $(function() { ... }) verwenden, um den gesamten jQuery-Code zu verpacken.
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
$(".item :first").addClass('first');
Hier ist der jQuery-Code
<script>
$(document).ready(function(){
$('body .item:first').addClass('YOUR CLASS VALUE');
});
<script>
Grüße, http://www.santoshkori.com
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');
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");