jQuery: this: "$ (this) .next(). Next()" działa, ale "$ (this) .next (". Div ') "nie jest

Question

OK, próbuję uzyskać ten zestaw informacje do ukrycia indywidualnie.

<img class="arrow" src="images/navigation/arrowright.png"> 
     <H2>More Information</H2> 
    <div class="box"> 
     <h2>Bibendum Magna Lorem</h2> 
     <p>Cras mattis consectetur purus sit amet fermentum.</p> 
    </div> 

<img class="arrow" src="images/navigation/arrowright.png"> 
    <H2>A Second Group of Information</H2> 
    <div class="box"> 
     <h2>Bibendum Magna Lorem</h2> 
     <p>Cras mattis consectetur purus sit amet fermentum.</p> 
    </div> 

Działa kiedy wpisz:

$(".arrow").click(function() { 
    $(this).next().next().slideToggle(); 
}); 

ale nie kiedy to zrobić:

$(".arrow").click(function() { 
    $(this).next('.box').slideToggle(); 
}); 

Co się dzieje, sprawia, że ​​druga opcja nie działa? Byłem w tym od wielu dni i nie mogę tego zrozumieć! Doceniam twój wkład!

Answer 1

Problem

Jeśli spojrzeć na documentation dla .next(selector), to nie „znaleźć” następny rodzeństwo pasujący do selektora. Raczej patrzy na TYLKO następnego rodzeństwa i TYLKO zwraca ten element, jeśli pasuje do selektora, który nie jest tym, czego potrzebujesz.

Oto co mówi doc dla .next():

Opis: Pobierz bezpośrednio po rodzeństwo każdego elementu w zestaw dopasowanych elementów. Jeśli dostarczony jest selektor, pobiera następnego rodzeństwa tylko wtedy, gdy pasuje do tego selektora.

Tak, można zobaczyć, że .next(".box") będzie wyglądać na elemencie h2 że bezpośrednio po elemencie .arrow (to kolejny element rodzeństwo), a następnie porównać go do selektora .box a ponieważ nie pasują do siebie, to będzie zwraca pusty obiekt jQuery.

---

rozwiązanie Korzystanie .nextAll()

Jeśli chcesz następny rodzeństwo pasujący do selektora, można użyć to:

$(this).nextAll(".box").eq(0).slideToggle(); 

to wyszukuje wszystkie rodzeństwo, które następują pasujące do selektora, a następnie wyodrębnia tylko pierwszy.

---

Utwórz własne.FindNext() Metoda

mam tak często zastanawiał się, dlaczego jQuery nie ma metody na to, że zrobiłem jeden siebie:

// get the next sibling that matches the selector 
// only processes the first item in the passed in jQuery object 
// designed to return a jQuery object containing 0 or 1 DOM elements 
jQuery.fn.findNext = function(selector) { 
    return this.eq(0).nextAll(selector).eq(0); 
} 

I wtedy po prostu użyć:

$(this).findNext(".box").slideToggle(); 

---

Opcja: Dodaj więcej Structure do HTML, aby rzeczy prostsze i bardziej elastyczne

FYI, wspólne podejście do problemów, takich jak ten jest umieszczenie elementu div wokół każdego zestawu elementów DOM jak ten:

<div class="container"> 
    <img class="arrow" src="images/navigation/arrowright.png"> 
    <H2>More Information</H2> 
    <div class="box"> 
      <h2>Bibendum Magna Lorem</h2> 
      <p>Cras mattis consectetur purus sit amet fermentum.</p> 
    </div> 
</div> 

<div class="container"> 
    <img class="arrow" src="images/navigation/arrowright.png"> 
    <H2>A Second Group of Information</H2> 
    <div class="box"> 
      <h2>Bibendum Magna Lorem</h2> 
      <p>Cras mattis consectetur purus sit amet fermentum.</p> 
    </div>  
</div> 

Następnie można użyć kodu, który jest nieco mniej wrażliwe na dokładnym pozycjonowaniu elementy:

$(".arrow").click(function() { 
    $(this).closest(".container").find(".box").slideToggle(); 
}); 

Ten podchodzi do zawierającym i wspólnego rodzica przy użyciu .closest() a następnie używa .find() znaleźć element w tej grupie .box.