Problèmes avec les sélecteurs JQuery et « est »

StackOverflow https://stackoverflow.com/questions/888853

Question

Je vais avoir du mal à comprendre pourquoi un sélecteur particulier ne fonctionne pas pour moi. Il est vrai que je suis un peu d'un débutant JQuery.

Cette correctement sélectionne premier div.editbox sur la page et les couleurs en jaune: 

$('div.editbox:first').css("background-color","yellow");

Cependant, cette construction if ... is rend la frontière mis en surbrillance apparaît pour chaque comme il est moucheté-over. 

$('div.editbox').bind('mouseover', function(e) {
    if ($(this).is('div.editbox:first')) {$(this).css("border", "1px solid red");}
});

J'ai essayé des variations telles que '.editbox: premier', '.editbox div: first', etc.

Pour l'essentiel, je veux être en mesure de tester de manière fiable que ce soit le premier ou le dernier élément avec le nom de classe.

Merci!

Edit: voici le code HTML J'utilise: 

<body>
<div class="container">
<p></p>
<div class="editbox" id="box1">Foo</div>
<div class="editbox" id="box2">Bar</div>
<div class="editbox" id="box3">Baz</div>
<div class="responsebox" id="rbox"></div>
</div>
</body>

Ceci est juste une preuve de concept Page; la page réelle sera évidemment beaucoup plus complexe. Encore une fois: ce que je veux est de détecter de manière fiable si je suis dans le premier ou le dernier « div.editbox ». Une solution est je: 

$('div.editbox:last').addClass("lasteditbox");

Ensuite test pour if ($(this).is(".lasteditbox")) qui fonctionne, mais il semble maladroit et je suis en train d'apprendre la bonne façon de le faire avec JQuery.

Était-ce utile?

La solution

Mise à jour:. Cela fonctionne pour le premier élément 

$('div.editbox').bind('mouseover', function(e) {
 if ($("div.editBox").index(this) == 0) {
      $(this).css("border", "1px solid red");
    }
});

Et pour le dernier élément, ce sélecteur fonctionne: 

if($("div.editBox").index(this) == ($("div.editBox").length-1)){
     $(this).css("color","red");
}

Autres conseils

Si vous voulez que le passage de la souris sur seulement la première occurrence de la zone d'édition de classe à l'intérieur div 

$('div.editbox:first').mouseover(function() {
   $(this).css("border", "1px solid red");
});

Modifier 

$('div.editbox').mouseover(function() {
   $(this).css("border", "1px solid yellow");
}).filter(':first').mouseover(function(){
  $(this).css("border", "1px solid red");
}).filter(':last').mouseover(function(){
  $(this).css("border", "1px solid blue");
})

u ont essayé 

if ($(this).is(':first')) {$(this).css("border", "1px solid red");}

    $('div.editbox').mouseover(function() {
       //change the css for all the elements
       $(this).css("background-color", "yellow");
    })
    .filter(':first,:last').mouseover(function(){
      //execlude the first and the last
      $(this).css("background-color", "Blue");
    })
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top