jQuery chọn yếu tố đầu tiên mà có một lớp nhất định sau này

Question

Đây là fiddle tôi: 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'); 
});​ 

tôi cần nó vì vậy khi bạn bấm a p.click, số p.target tiếp theo chuyển sang màu đỏ.

Vì vậy, nếu bạn nhấp vào 'Click 1' thì 'Target 1' chuyển sang màu đỏ. Nếu bạn nhấp vào 'Click 2' thì 'Target 3' chuyển sang màu đỏ.

Cũng như .find Tôi đã thử .closest và từ tài liệu jQuery, có vẻ như tôi thích nó sẽ hoạt động. Như bạn thấy từ HTML, .target không phải là con của .click, trong trường hợp tạo sự khác biệt.

Answer 1

Đây là một cách tiếp cận khác, mặc dù tôi không biết cách thực hiện .index() trong trường hợp này. Điều này cũng giả định rằng không bao giờ có hai .click yếu tố liên tiếp (hoặc phrased cách khác nhau: Luôn luôn có ít nhất một .target yếu tố giữa hai .click phần tử):

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

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

DEMO

này hoạt động bởi vì các yếu tố được lựa chọn trong thứ tự chúng xuất hiện trong tài liệu.

Answer 2

Bạn xây dựng html không dễ dàng truy cập cho đến khi mục tiêu cụ thể. Chúng tôi có thể đạt được những gì bạn muốn nhưng kịch bản sẽ trở nên phức tạp khi bạn đi qua theo cách như vậy. Thay vào đó, thêm một div nhóm sẽ làm cho bạn kịch bản nhỏ và dễ dàng.

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 hoạt động trên các anh chị em. Trong trường hợp của bạn, nó sẽ tìm kiếm tất cả anh chị em của # click với lớp .target.

Điều bạn cần là parents -> sibling -> child.

DEMO

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

Answer 3

Bạn có thể thử này.

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

này sẽ chọn các yếu tố bạn cần trong mã html của bạn:

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

Answer 5

Bạn đang tìm kiếm này?

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

Updated Fiddle

Answer 6

Dựa trên HTML cập nhật của bạn, tôi đã tạo fiddle này: http://jsfiddle.net/wxWgG/22/

... và sử dụng jQuery này

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

Là những gì bạn muốn?