Come selezionare solo un fratello con jQuery?

Question

Ho questo codice:

<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> 

e

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

siblings(".bar")[0] non funziona. (non viene visualizzata alcuna finestra di avviso e nessun errore javascript)

Qual è il modo corretto per selezionare solo un fratello?

jsFiddle try

Edit: Non voglio usare prev() o next().

Answer 1

È possibile utilizzare il metodo eq per ridurre l'unico set di elementi da uno a un indice specifico:

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

che selezionerà il primo elemento nel set . Nel tuo caso, si può semplicemente utilizzare prev, come l'elemento che stai cercando viene direttamente prima che l'elemento cliccato:

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

Il problema con il metodo matrice notazione si stesse utilizzando è che restituisce il nodo DOM reale contenuto all'interno dell'oggetto jQuery e questo non avrà un metodo text. eq è il metodo jQuery equivalente per fare ciò.

Answer 2

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

quindi sarebbe:

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

Answer 3

Si potrebbe utilizzare successivo() o prev();

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

violino qui http://jsfiddle.net/fMT5x/2/

Answer 4

È anche possibile afferrare il primo elemento di un oggetto jQuery utilizzando prima:

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

Answer 5

È possibile farlo:

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

Ma, dovete essere sicuri che esista una voce precedente a .baz

o (meglio)

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

OR (peggio), solo per riferimento, non utilizzarlo :)

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

Answer 6

Ecco un link che è utile per conoscere selezionare un elemento fratelli in jQuery.

How to select only one sibling with jQuery

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

si possono anche trovare un elemento con il selettore Jquery

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

Per ulteriori informazioni, consultare questo link next(), nextAll(), prev(), prevAll(), find() and siblings in JQuery