J'ai plusieurs éléments avec le test de classe. Si je les survole, ils devraient avoir une bordure rouge autour d'eux parce que je les enveloppe de div. Cela fonctionne, mais comment est-il possible d'envelopper uniquement l'élément actif, celui que je survole, pas tous les éléments qui ont la classe .test?

$(".test").hover(function() {
 $(".sample").wrap('<div style="border: 1px solid red;" />');
}
0
Badr Hari 30 nov. 2011 à 22:56

5 réponses

Meilleure réponse

Je ne sais pas si c'est ce que vous recherchez, mais cela encapsulera tous vos éléments activés avec le test de classe.

$(".test:enabled").hover(function() {
    $(this).wrap('<div style="border: 1px solid red;" />');
});
0
xbrady 30 nov. 2011 à 19:03

Si je vous comprends bien, vous souhaitez sélectionner uniquement le .sample dans l'élément actuellement survolé. Si tel est le cas, consultez cette question. JQuery accepte un 2ème paramètre.

$(".test").hover(function() {
     $(".sample",this).wrap('<div style="border: 1px solid red;" />');
}
0
Community 23 mai 2017 à 12:03

Il serait un peu plus évident de vous aider si vous incluez votre code HTML. Je suppose que l'objet avec class="sample" est un objet parent.

$(".test").hover(function() {
 $(this).closest(".sample").wrap('<div style="border: 1px solid red;" />');
});

Vous devrez bien sûr déballer cela lorsque vous arrêtez de survoler ou mettre du code pour ne pas le boucler encore et encore.

Il serait préférable que vous utilisiez un objet existant pour la bordure et que vous changiez simplement la classe ou le style en survol, en survol. Comme je ne sais pas quel est votre code HTML, je ne peux que deviner ce qui pourrait être utilisé:

$(".test").hover(function() {
   $(this).addClass("active");
}, function() {
   $(this).removeClass("active");
});

Et puis, ayez une règle CSS:

.active {border: 1px solid red;}
0
jfriend00 30 nov. 2011 à 19:01

Utilisez $ (this)

$(".test").hover(function() {
 $(this).wrap('<div style="border: 1px solid red;" />');
}
0
Evan 30 nov. 2011 à 18:59

Vous devez utiliser $ (this) dans la fonction. $ (this) fera référence à l'élément actuellement survolé.

$(".test").hover(function() {
    $(this).wrap('<div style="border: 1px solid red;" />');
});
0
jValdron 30 nov. 2011 à 18:59