Ajouter une classe de première div à l'aide de jQuery

Comment ajouter une classe de première div à l'aide de jQuery.

J'ai Essayé le code suivant mais ne fonctionne pas pour moi.
peut-être que je suis absent quelque chose.

<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: Merci à tous, est-il de toute façon pour ajouter une classe reste de DIVs?

  • Il vous manque des DOM ready: $(function() { ... });.
  • Réponse pour ton edit: $(".item:not(:first,:last)").addClass("newClass");.
InformationsquelleAutor Zim3r | 2012-10-09
  1. 5

    Vous exécutez le code avant de le balisage est prêt. Placer le code dans

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

});
    • Cela devrait être un rappel à chaque fois que quelqu'un va poster un jQuery question.
    • Je pense que c'est la seule bonne réponse ici.
    • +1 Vraiment Merci, Ça fonctionne maintenant. comment puis-je ajouter une classe au reste de DIVs?
    • VisioN a déjà donné une excellente réponse.
    InformationsquelleAutor Peter Pajchl
  2. 5

    essayer

    $(document).ready(function() {
  $('.item:first-child').addClass('first');
});
    InformationsquelleAutor Andy
  3. 3

    Votre code est correct, mais il est exécuté avant que le DOM est prêt, veuillez déplacer le <script></script> à la dernière ligne avant </body>.

    Pour ajouter une classe pour le reste des éléments que vous pouvez faire cela (à partir de la VisioN du commentaire)

    $(".item:not(:first,:last)").addClass("differentClass");
    InformationsquelleAutor Adi
  4. 2
    $(".item :first").addClass('first');
    InformationsquelleAutor Darren
  5. 2

    u utiliser ce code

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

or
  $("div:first-child").addClass("anyclass");
    InformationsquelleAutor Saeed
  6. 2

    votre code doit s'exécuter lorsque le DOM est chargé complètement. Donc utiliser $(document).ready().

    le script peut être exécuté dès que le DOM de la hiérarchie a été entièrement
    construite. Le gestionnaire de passée à .prêt() est garantie
    exécuté après le DOM est prêt, donc c'est généralement le meilleur endroit pour
    joindre tous les autres gestionnaires d'événements et d'exécuter d'autres jQuery.

    Lire plus environ $(document).ready().

    vérifier le code ci-dessous. Il vous aidera à faire ce que vous voulez. 

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

    Sinon votre js est exécuté avant même que le DOM est chargé

    $(".item:first").addClass('first'); fonctionnera très bien aussi.

    Essayez la démo aussi.

    Espère que cela va vous aider. Si vous avez des questions, n'hésitez pas à demander. Grâce

    • Le bon sélecteur ne doit pas contenir d'espace: $(".item:first").
    • corrigés. dans la démo, il a fait un travail avec un espace. en tout cas merci pour souligner 🙂
    InformationsquelleAutor Techie
  7. 1

    voir jsfiddle ici

    $(document).ready(function() {
    $('div:first').addClass('first');
});
    InformationsquelleAutor Devnegikec
  8. 1

    Vous pouvez toujours utiliser directement le CSS, bien qu'il soit CSS3. E. g. vous pouvez remplacer votre curre t CSS avec:

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

    Si vous ne voulez juste jQuery, alors vous pourriez essayer:

    $('.item:first').addClass('first');
$('.item:last').addClass('last');
    • Comme d'autres l'ont mentionné, le jQuery doit être prête() de la fonction d'autre elle s'exécute avant que la page est affichée.
    InformationsquelleAutor Phil
  9. 1

    Essayer cette

    CODE JS

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

    DÉMO

    Remarque

    vous devez utiliser $(function() { ... }) pour envelopper toute jQuery.

    InformationsquelleAutor Codegiant
  10. 1

    Voici le code jQuery

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

    Ce qui concerne,
    http://www.santoshkori.com

    InformationsquelleAutor WordPress Joomla freelancer