jQuery sélecteur de classe la plus proche

<div class="wrap">
    <div class="Level2">Click me</div>
    <div class="Level3">Information</div>
</div>

<div class="wrap">
    <div class="Level2">Click me</div>
    <div class="Level3">Information</div>
</div>

<div class="wrap">
    <div class="Level2">Click me</div>
    <div class="Level3">Information</div>
</div>

<div class="wrap">
    <div class="Level2">Click me</div>
    <div class="Level3">Information</div>
</div>

jQuery

$('.Level2').click(function(){
   $('.Level2').closest('.Level3').fadeToggle();
});

Je voulais choisir le plus proche level3 à fadeIn et fadeOut, mais ne fonctionne pas. Est ma syntaxe de mal? en ligne Exemple :http://jsfiddle.net/meEUZ/

source d'informationauteur olo

  1. 22

    Essayer .next() au lieu de .closest() qui traverse les ancêtres de l'élément du DOM.

    Travail Démo

    Aussi, vous devez utiliser $(this) plutôt que $('.Level2') d'autre, il va sélectionner TOUS les .Level2 plutôt que sur lequel vous avez cliqué.

    Vous pouvez aussi aller pour quelque chose comme cela - $(this).closest('.wrap').find('.Level3').fadeToggle();.

    Cheers!

  2. 11

    de jQuery .plus proche (le) méthode ne sélectionnez pas de frère, de sélecteurs, mais les parents. On dirait que vous êtes à la recherche pour le .les frères et sœurs() méthode.

    $('.Level2').click(function(){
   $(this).siblings('.Level3').fadeToggle();
});
  3. 4

    plus proche se déplace jusqu'à l'arbre du dom. il ne sera pas trouver quelque chose des thats un frère ou une sœur. vous pouvez utiliser un trouver sur qu'un parent pour atteindre cet

    $('.Level2').click(function(){
       $(this).parent().find('.Level3').fadeToggle();
    });
  4. 0

    Oui! closest commence les DOM recherche dans le sélecteur de vous passer d'elle, et se dirige vers le haut de la hiérarchie DOM, à la recherche par les parents ou les ancêtres. Utilisation siblings ou next à la place.
    Comme ceci:

    $('.Level2').click(function(){
   $(this).siblings('.Level3').fadeToggle();
});