jQuery: this: "$ (this) .next(). Next()" works, but "$ (this) .next ('. Div')" is not

Question

Хорошо, я пытаюсь получить этот набор информацию, чтобы скрыть индивидуально.

<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> 

Это работает, когда я печатаю это:

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

, но не тогда, когда я делаю это:

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

Что происходит, что делает второй вариант не работает? Я был у него в течение нескольких дней и не мог чертовски понять это! Я ценю ваш вклад!

Answer 1

Проблема

Если посмотреть на documentation для .next(selector), это не «найти» следующий родственный, соответствующий селектор. Скорее, он смотрит на JUST следующего брата и ТОЛЬКО возвращает этот элемент, если он соответствует селектору, который не то, что вы хотите.

Вот что документ для .next() говорит:

Описание: Получить сразу после родственный каждого элемента в набор соответствующих элементов. Если предусмотрен селектор, он получает следующего брата, только если он соответствует этому селектору.

Таким образом, вы можете увидеть, что .next(".box") будет смотреть на h2 элемент, который непосредственно следует ваш .arrow элемент (это следующий родственный элемент), а затем сравнить его с селектором .box и так как они не совпадают, то это будет возвращает пустой объект jQuery.

---

решение, использующее .nextAll()

Если вы хотите, чтобы следующий родственный, соответствующий селектор, вы можете использовать это:

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

Это находит все братья и сестры, которые следуют которые соответствуют селектору, а затем извлекают только первый.

---

Создайте себя.FindNext() Метод

Я так часто задавался вопросом, почему JQuery не способ для этого, что я сделал один себе:

// 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); 
} 

А, то вы бы просто использовать:

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

---

Опция: Добавить еще Structure в HTML, чтобы сделать вещи проще и гибче

FYI, общий подход к проблемам, как это поставить содержащий DIV вокруг каждого набора элементов DOM, как это:

<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> 

Затем, вы можете использовать код, который немного менее чувствителен к точному позиционированию элементы:

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

Это идет вверх к содержащему и общему родителю с использованием .closest(), а затем использует .find(), чтобы найти .box элемент в этой группе.