jQuery next () селектор, когда div не соседние

Question

Я использовал следующее, чтобы изменить ширину div.my-div, который появляется после того, который вы щелкнули:

$(".my-div").click(function () {
    $(this).next().css({'width':'500px'});
});

Поскольку мои дивы были соседними, это работало нормально:

<div class="my-div">stuff</div>
<div class="my-div">stuff</div>
<div class="my-div">stuff</div>

Однако теперь структура изменилась, поэтому они больше не соседствуют:

<div>
  <div class="my-div">stuff</div>
</div>
<div>
  <div>
    <div class="my-div">stuff</div>
  </div>
</div>
<div class="my-div">stuff</div>

Какой самый простой способ выбрать следующий элемент того же класса? Спасибо

Answer 1

jQuery будет возвращать элементы в порядке их появления в DOM.

Таким образом, вы можете кэшировать все элементы .my-div, используя index() ^{[документы]} метод, чтобы получить индекс того, кто получил событие, увеличить его и использовать eq() ^{[документы]} метод для получения следующего.

var divs = $(".my-div");  // cache all of them

divs.click(function () {
    var idx = divs.index( this );  // get the index in the set of the current one
    divs.eq( idx + 1 ).css({'width':'500px'}); // get the one at the next index
});

Это избавляет вас от ненужного выбора и обхода DOM.

Пример: http://jsfiddle.net/VrATm/1/

---

РЕДАКТИРОВАТЬ: Написал неправильный пример ссылки.Исправлено.

Answer 2

Вы можете пройти по иерархии деревьев. То есть вы можете сначала перейти к родителю, потом к следующему, потом к детям, как это:

$(this).parent().next().find(' > div').css({'width':'500px'});