jQuery selezionare primo elemento che ha una certa classe dopo questo

Question

Ecco il mio violino: 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'); 
});​ 

ne ho bisogno in modo che quando si fa clic su a p.click, il prossimo p.target diventa rosso.

Quindi, se si fa clic su 'Click 1' allora 'Target 1' diventa rosso. Se fai clic su 'Click 2' allora 'Target 3' diventa rosso.

Così come .find ho provato .closest e dalla documentazione di jQuery mi sembra che dovrebbe funzionare. Come puoi vedere dal codice HTML, .target non è figlio di .click, nel caso in cui ciò faccia la differenza.

Answer 1

Ecco un altro approccio, anche se non so quanto sia performante .index() in questo caso. Ciò presuppone anche che ci sono mai due consecutivi .click elementi (o formulata diversamente: c'è sempre almeno un .target elemento tra due .click elementi):

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

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

DEMO

Questo funziona perché gli elementi sono selezionati l'ordine in cui appaiono nel documento.

Answer 2

Il costrutto HTML non facilita l'accesso a un obiettivo specifico. Possiamo ottenere ciò che vuoi ma la sceneggiatura diventerà complicata quando attraverserai in questo modo. Invece, aggiungi un div di raggruppamento che ti renderà lo script piccolo e facile.

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 lavora sul fratello. Nel tuo caso, cercherà il fratello di tutti i clic con la classe .target.

Quello che ti serve è parents -> sibling -> child.

DEMO

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

Answer 3

Si può provare questo.

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

Questo seleziona gli elementi necessari nel codice HTML:

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

Answer 5

Sei alla ricerca di questo?

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

Updated Fiddle

Answer 6

Sulla base di codice HTML aggiornato, ho creato questo violino: http://jsfiddle.net/wxWgG/22/

... e usato questo jQuery

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

E 'questo quello che volevi?