jquery, trouver l'élément suivant par classe

Question

Comment puis-je trouver l'élément suivant par classe.

J'ai essayé avec $(obj).next('.class'); mais cela renvoie des classes uniquement dans $(obj) parent. J'ai besoin de prendre l'élément suivant n'importe où dans le code par le nom de la classe. Parce que mon code ressemble à

<table>
<tr><td><div class="class">First</div></td></tr>
<tr><td><div class="class">Second</div></td></tr>
</table>

Est-ce possible ?

Answer 1

Dans ce cas, vous devez aller jusqu'au <tr> puis utiliser .next() comme ceci :

$(obj).closest('tr').next().find('.class');

Ou s'il peut y avoir des rangées entre les deux sans que le .class à l'intérieur, vous pouvez utiliser .nextAll() comme ceci :

$(obj).closest('tr').nextAll(':has(.class):first').find('.class');

Answer 2

Pour trouver l'élément suivant de la même classe :

$(".class").eq( $(".class").index( $(element) ) + 1 )

Answer 3

Vous ne pouvez pas utiliser next() dans ce scénario, si l'on regarde le fichier documentation il est dit :
Next() Obtenez le le frère ou la sœur immédiatement suivant(e) de chaque élément dans l'ensemble des éléments appariés. Si un sélecteur est fourni, il récupère le prochain élément frère qui correspond au sélecteur.

donc si le second DIV était dans le même TD alors vous pourriez coder :

// Won't work in your case
$(obj).next().filter('.class');

Mais comme ce n'est pas le cas, je ne vois pas l'intérêt d'utiliser next(). Vous pouvez coder à la place :

$(obj).parents('table').find('.class')

Answer 4

Pour trouver l'élément suivant par nom de balise

  function findNext(start, tag)
    {
      while(start.nodeName !== tag)
      {
            start = start.nextElementSibling;
      }
      return start;
    }

Answer 5

Étant donné un premier sélecteur : SélecteurA vous pouvez trouver le prochain match de SélecteurB comme ci-dessous :

Exemple avec le survol de la souris pour changer la bordure :

$("SelectorA").on("mouseover", function() {
    var i = $(this).find("SelectorB")[0];
    $(i).css({"border" : "1px"});
    });
}

Exemple d'utilisation générale pour modifier border-with :

var i = $("SelectorA").find("SelectorB")[0];
$(i).css({"border" : "1px"});