sibling - parents jquery

¿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: no quiero usar prev() o next() .

Answer 1

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

Cómo seleccionar solo un hermano con jQuery

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

también puedes encontrar un elemento usando el selector Jquery

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

Para obtener más información, consulte este enlace next (), nextAll (), prev (), prevAll (), find () y los hermanos en JQuery

Answer 2

Puede usar el método eq para reducir el conjunto de elementos coincidentes a uno en un índice específico:

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

Eso seleccionará el primer elemento en el conjunto. En su caso, podría simplemente usar prev , ya que el elemento que está buscando viene directamente antes del elemento cliqueado:

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

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

Answer 3

Puede usar next () o prev ();

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

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

Answer 4

También puedes tomar el primer elemento de un objeto jQuery usando primero:

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

Answer 5

Usted puede hacer:

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

PERO, debes estar seguro de que existe un artículo anterior para .baz

O mejor)

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

O (PEOR), solo como referencia, nunca lo use :)

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

Answer 6

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

Entonces sería:

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