¿Cómo seleccionar solo un hermano con jQuery?

Question

tengo este código:

<ul> 
    <li class="foo">foo text</li> 
    <li class="foo2">foo2 text</li> 
    <!-- more li here --> 
    <li class="bar">bar text</li> 
    <li class="bar2">bar2 text</li> 
    <!-- more li here --> 
    <li class="baz">clickme!</li> 
</ul> 

y

$(".baz").click(function() { 
    alert("test: " + $(this).siblings(".bar")[0].text()); // Doesn't work 
}); 

siblings(".bar")[0] no funciona. (no aparece cuadro de alerta, y no hay error de javascript)

¿Cuál es la forma correcta de seleccionar un solo hermano?

jsFiddle try

Editar: que no quieren usar prev() o next().

Answer 1

Usted puede utilizar el método eq para reducir el conjunto combinado de elementos a uno en un índice específico:

$(this).siblings(".bar").eq(0).text() 

que seleccionará el primer elemento en el conjunto . En su caso, usted podría simplemente utilizar prev, como el elemento que busca viene directamente antes de que el elemento de clic:

$(this).prev(".bar").text() 

El problema con el método de notación de matriz que estaba usando es que devuelve el nodo DOM real contenido dentro del objeto jQuery, y que no va a tener un método text. eq es el método jQuery equivalente para hacer esto.

Answer 2

http://api.jquery.com/next/ y/o http://api.jquery.com/prev/.

por lo que sería:

$(this).prev().text()); o $(this).next().text());

Answer 3

podría usar a continuación() o anterior();

$(".baz").click(function() { 
    alert("test: " + $(this).prev(".bar").text()); 
}); 

violín aquí http://jsfiddle.net/fMT5x/2/

Answer 4

También puede agarrar el primer elemento de un objeto jQuery utilizando en primer lugar:

alert(siblings(".bar").first().text()); 

Answer 5

Puede hacerlo:

$(".baz").click(function() { 
    alert("test: " + $(this).prev.html()); 
}); 

PERO, usted tiene que estar seguro de que existe un elemento anterior a .baz

OR (Better)

$(".baz").click(function() { 
    alert("test: " + $(this).siblings(".bar").eq(0).text()); 
}); 

O (peor), apenas para la referencia, no lo utilice nunca :)

$(".baz").click(function() { 
    var text = 0; 
    $(this).siblings(".bar").each(function(){ text = $(this).text(); break; }); 
    alert("test: " + text); 
}); 

Answer 6

Aquí hay un enlace que es útil para aprender acerca de seleccionar un elemento de hermanos en jQuery.

How to select only one sibling with jQuery

$("selector").nextAll(); 
$("selector").prev(); 

también se puede encontrar un elemento con jQuery selector de

$("h2").siblings('table').find('tr'); 

Para obtener más información, consulte este enlace next(), nextAll(), prev(), prevAll(), find() and siblings in JQuery