Comment ajouter une classe à l'élément suivant de l'élément en cours tableau en jquery?

Je voudrais savoir comment faire une telle chose.

par exemple, j'ai quelque chose comme ceci:

<ul>
   <li><a href="1.html">first item</a></li>
   <li><a href="2.html">second item</a></li>
   <li><a href="3.html">third item</a></li>
   <li><a href="4.html">fourth item</a></li>
</ul>

J'ai besoin de addClass à un survol de l'élément, c'est facile, je fais comme ça:

$("li a").hover(
    function () {
        $(this).addClass("show");
    },
    function () {
        $(this).removeClass("show");
    }
);

Cependant, j'ai besoin de addClass à chaque élément li aussi.

Donc, par exemple lors du premier li un eleemnt est le curseur de la classe show2 sera ajouté à li un de la deuxième li un élément.

Comment faire?

InformationsquelleAutor lorenc55 | 2011-08-07
  1. 5

    Essayer cette

    $("li a").hover(
              function () {
                $(this).addClass("show").parent().next().addClass("show2");               


              },
              function () {
                $(this).removeClass("show").parent().next().removeClass("show2");

              }
            );
    • Grâce Shankar il fonctionne ;).
    • merci cela m'a guidé dans la bonne direction avec quelques question qui m'intrigue 🙂
    InformationsquelleAutor ShankarSangoli
  2. 2

    Vous pouvez utiliser parent() avec next() et find() pour correspondre à la prochaine ancrage de l'élément.

    À partir de là, vous pouvez utiliser ajouter() pour ajouter le planait élément à l'ensemble, et bascule les classes sur les deux éléments avec un seul appel:

    $("li a").hover(function() {
    $(this).parent().next().find("a").add(this).toggleClass("show");
});

    EDIT: Le ci-dessus ne prennent pas l'autre show2 nom de la classe compte. Pour la soutenir, vous pouvez faire quelque chose comme:

    $("li a").hover(function() {
    $(this).toggleClass("show").parent().next().find("a").toggleClass("show2");
});
    InformationsquelleAutor Frédéric Hamidi
  3. 1
    $("li a").hover(function () {
  $(this).addClass("show");
  var next_li = $(this).parent().next();
  $('a', next_li).addClass("show2");
},
function () {
  $(this).removeClass("show");
  var next_li = $(this).parent().next();
  $('a', next_li).removeClass("show2");
});

    Même si elle peut être écrite sur une seule ligne.

    Pour des raisons de lisibilité, j'aime toujours utiliser plusieurs lignes.

    InformationsquelleAutor PeeHaa
  4. 0

    Vous pouvez l'obtenir par le code suivant (voir cette jsfiddle comme une preuve). Il sera procédé à la liste des éléments et affecter différents événements pour chacun d'eux, en fonction de leur nombre au sein de l'ensemble des éléments:

    var my_list = jQuery('ul');
my_list.find('li').each(function(index, element){
    if (index == 0){
        jQuery(this).hover(function(){
            my_list.find('li a').addClass('show');
        }, function(){
            my_list.find('li a').removeClass('show');
        });
    } else {
        jQuery(this).hover(function(){
            my_list.find('li:gt('+(index-1)+') a').addClass('show');
        }, function(){
            my_list.find('li:gt('+(index-1)+') a').removeClass('show');
        });
    }
});

    EDIT:, je le vois, j'ai mal compris vous - ma solution permettra d'ajouter des show classe à chaque élément suivant, non seulement le premier d'entre eux.

    InformationsquelleAutor Tadeck
  5. 0

    Vous pouvez utiliser du Jquery next fonction pour obtenir l'élément suivant.

    JsFiddle: jsfiddle.net/ra368sgj 

    $("li a").hover(
    function () {
        $(this).addClass("show").parent().next().addClass("show2"); 
    },
    function () {
        $(this).addClass("show").parent().next().addClass("show2").removeClass("show2"); 
    }
);
    • Pourriez-vous expliquer votre réponse un peu?
    • addClass à chaque élément li. Donc, par exemple lors du premier li un élément est le curseur de la classe show2 seront ajoutées à la li un de la deuxième li un élément.
    • Ajouter à la réponse d'autres personnes de comprendre ce que votre réponse est en train de faire.
    • veuillez trouver la js fiddle lien pour mieux comprendre jsfiddle.net/ra368sgj
    • jsfiddle.net/ra368sgj - Js fiddle lien pour mieux comprendre
    InformationsquelleAutor Rajesh