jQuery seleccionar primer elemento que tiene una cierta clase después de este

Question

Aquí está mi violín: 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'); 
});​ 

lo necesito por lo que cuando se hace clic a p.click, el siguiente p.target se vuelve rojo.

Si hace clic en 'Click 1', 'Target 1' cambia a rojo. Si hace clic en 'Click 2', entonces 'Target 3' se vuelve rojo.

Así como .find He intentado .closest y de la documentación jQuery me parece que debería funcionar. Como puede ver en el HTML, .target no es un hijo de .click, en caso de que eso haga la diferencia.

Answer 1

Aquí hay otro enfoque, aunque no sé cuán performante es .index() en este caso. Esto también supone que nunca hay dos .click elementos consecutivos (o expresado de otra manera: Siempre hay al menos un .target elemento entre dos .click elementos):

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

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

DEMO

Esto funciona porque los elementos se seleccionan en el orden en que aparecen en el documento.

Answer 2

You html construct no facilita el acceso hasta el objetivo específico. Podemos lograr lo que desee, pero el guión se complicará cuando atraviese de esa manera. En su lugar, agregue un div de agrupación que hará que la secuencia de comandos sea pequeña y fácil.

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 trabaja en el hermano. En su caso, buscará a todos los hermanos de # click con la clase .target.

Lo que necesita es parents -> sibling -> child.

DEMO

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

Answer 3

Puede probar esto.

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

Esto selecciona los elementos que necesita en su código HTML:

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

Answer 5

¿Está buscando para esto?

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

Updated Fiddle

Answer 6

Basado en el código HTML actualizado, he creado este violín: http://jsfiddle.net/wxWgG/22/

... y utilizado este jQuery

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

Es eso lo que querías?