Problèmes avec les sélecteurs JQuery et "est"

J'ai de la difficulté à comprendre pourquoi un sélecteur particulier ne fonctionne pas pour moi. Certes, je suis un peu un débutant JQuery.Problèmes avec les sélecteurs JQuery et "est"

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

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

Cependant, cette construction fait if ... is la frontière apparaît en surbrillance pour chaque boîte 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 variantes telles que '.editbox: premier', '.editbox div: first', etc.

Essentiellement, je veux être en mesure de tester de manière fiable que ce soit la première ou dernier élément de avec le nom de la 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 bien sûr 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");

pour tester ensuite 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.

Source

2009-05-20 SylvanK

si vous voulez l'événement mouseover ne binded à la première? – TStamper

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"); 
}

Source

2009-05-20 16:19:19

Merci, mais cela ne le prend que si c'est le premier enfant du conteneur parent; pas le premier élément avec le nom de la classe. – SylvanK

S'il vous plaît essayer ma mise à jour –

Désolé, ne le ramasse pas du tout. Je vais ajouter le code HTML que j'utilise ci-dessus. – SylvanK

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"); 
})

Source

2009-05-20 16:13:52 TStamper

Merci TStamper; le CSS est seulement à titre d'exemple. J'ai une fonction qui s'exécute sur tous les éléments, mais je veux qu'elle se comporte différemment sur le premier et le dernier élément, donc je dois être capable de détecter quand la fonction est en cours d'exécution à l'intérieur de ceux-ci. – SylvanK

mis à jour pour comparer pour tous – TStamper

Je suis très désolé TStamper; J'apprécie l'approche que vous prenez, mais j'attache un gestionnaire d'événement modérément complexe à chaque élément. Votre approche signifierait que je dois avoir 3 versions distinctes de cette fonction; ou alternativement, prenez un argument à la fonction quand vous êtes lié s'il s'agit du premier, du dernier ou d'un élément du milieu. Je suppose que cette approche pourrait fonctionner, mais encore une fois, j'essaie de trouver la «bonne» méthode JQuery de le faire. Est-ce que ce que je fais avec $ (this) .is (". Class: first") n'est vraiment pas réalisable? – SylvanK

ont u essayé

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

Source

2009-05-20 16:16:19 ssmithstone

Qui attrape chaque boîte à nouveau. – SylvanK

$('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"); 
    })

Source

2009-05-20 16:38:36

Problèmes avec les sélecteurs JQuery et "est"

Répondre

Questions connexes