jQuery select first element that has a certain cla

问题:

Here is my fiddle: 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');
});​

I need it so when you click a p.click, the next p.target turns red.

So if you click on 'Click 1' then 'Target 1' turns red. If you click on 'Click 2' then 'Target 3' turns red.

As well as .find I've tried .closest and from the jQuery documentation it seems to me like it should work. As you can see from the HTML, .target is not a child of .click, in case that makes a difference.

回答1:

Here is another approach, although I don't know how performant .index() is in this case. This also assumes that there are never two consecutive .click elements (or phrased differently: There is always at least one .target element between two .click elements):

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

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

DEMO

This works because the elements are selected in the order they appear in the document.

回答2:

Are you looking for this?

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

Updated Fiddle

回答3:

This selects the elements you need in your html code:

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

回答4:

Based on your updated HTML, I created this fiddle: http://jsfiddle.net/wxWgG/22/

...and used this jQuery

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

Is that what you wanted?

回答5:

You can try this.

$('#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];
    }
});​

回答6:

You html construct doesn't facilitate to access till specific target. We can achieve what you want but the script will get complicated when you traverse in such a manner. Instead, add a grouping div which will make you script small and easy.

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 works on the sibling. In your case, it will look for all #click's sibling with class .target.

What you need is parents -> sibling -> child.

DEMO

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