JQuery выберите первый элемент, который имеет определенный класс после этого

Question

Вот моя скрипка: http://jsfiddle.net/jamesbrighton/wxWgG/4/

HTML:

<div> 
    <p class="click">Click 1</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
</div> 

<div> 
    <p class="target">Target 1</p> 
</div> 
<div> 
    <p class="target">Target 2</p> 
</div> 


<div> 
    <p class="click">Click 2</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
</div> 

<div> 
    <p class="target">Target 3</p> 
</div> 
<div> 
    <p class="target">Target 4</p> 
</div> 

JQuery:

$('.click').click(function() { 
    $(this).nextAll('.target').css('color','red'); 
});​ 

мне это нужно так, когда вы нажимаете a p.click, следующий p.target становится красным.

Так что если вы нажмете на 'Click 1', то 'Target 1' станет красным. Если вы нажмете на 'Click 2', тогда 'Target 3' станет красным.

Как и .find Я пробовал .closest и из документации jQuery мне кажется, что он должен работать. Как вы можете видеть из HTML, .target не является дочерним по отношению к .click, если это имеет значение.

Answer 1

Вот еще один подход, хотя я не знаю, как в этом случае работает .index(). Это также предполагает, что есть никогда не два последовательных .click элементы (или сформулированы по-разному: Существует всегда по крайней мере один .target элемент между двумя .click элементами):

var $elements = $('.click, .target'); 

$('.click').click(function() { 
    $elements.eq($elements.index(this) + 1).css('color','red'); 
});​ 

DEMO

Это работает, потому что элементы выбираются в порядок, который они отображают в документе.

Answer 2

Вы не создадите конструкцию html для доступа к определенной цели. Мы можем достичь того, чего вы хотите, но сценарий будет усложняться, когда вы пройдете через такой путь. Вместо этого добавьте группу div, которая сделает ваш скрипт небольшим и легким.

DEMO

HTML:

<div class="group"> <!-- added grouping wrapper --> 
<div> 
    <p class="click">Click 1</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
</div> 

<div> 
    <p class="target">Target 1</p> 
</div> 
<div> 
    <p class="target">Target 2</p> 
</div> 
</div> 
<div class="group"> 
<div> 
    <p class="click">Click 2</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
</div> 

<div> 
    <p class="target">Target 3</p> 
</div> 
<div> 
    <p class="target">Target 4</p> 
</div> 
</div> 

JS:

$('.click').click(function() { 
    $(this).closest('.group').find('.target').css('color','red'); 
}); 

---

.nextAll работает на собрата. В вашем случае он будет искать всех родственников # click с классом .target.

Что вам нужно, это parents -> sibling -> child.

DEMO

$('#click').click(function() { 
    $(this).parent().siblings().find('.target').css('color','red'); 
}); 

Answer 3

Вы можете попробовать это.

$('#click').click(function() { 
    var go = true; 

    var item = $(this).parent(); 

    while(go && item) { 
     var target = $('.target', item)[0]; 

     if(target != null) { 
      go = false; 
      $(target).css('color', 'red'); 
     } 

     item = $(item).next()[0]; 
    } 
});​ 

Answer 4

Это выбирает элементы, необходимые в вашем HTML код:

$('.click').click(function() { 
    $(this).parent("div").next('div').find('.target').css('color','red'); 
});​ 

Answer 5

Вы ищете это?

$('.click').click(function() { 
    $(".target", $(this).parent().next()).css('color','red'); 
}); 

Updated Fiddle

Answer 6

на основе обновленной HTML, я создал эту скрипку: http://jsfiddle.net/wxWgG/22/

... и использовал JQuery

$('.click').click(function() { 
    $(this).parent().next().find('p.target').css('color','red'); 
});​ 

Это то, что вы хотели?