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');
});​

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

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

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

Answer 1

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

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

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

DEMO

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

Answer 2

Вы ищете это?

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

Обновленная скрипка

Answer 3

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

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

Answer 4

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

... и использовал этот jQuery

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

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

Answer 5

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

$('#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 6

Ваша 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');
});