web-dev-qa-db-fra.com

Comment sélectionner un seul frère avec jQuery?

J'ai ce code:

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

et

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

siblings(".bar")[0] ne fonctionne pas. (aucune boîte d'alerte n'apparaît et aucune erreur javascript)

Quelle est la bonne façon de sélectionner un frère ou une sœur seulement?

essai jsFiddle

Edit: Je ne veux pas utiliser prev() ou next().

jquerysiblings
35
Benjamin Crouzier

Vous pouvez utiliser la méthode eq pour réduire l'ensemble d'éléments mis en correspondance à un à un index spécifique:

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

Cela sélectionnera le premier élément de l'ensemble. Dans votre cas, vous pouvez simplement utiliser prev , car l'élément que vous recherchez vient directement avant l'élément cliqué:

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

Le problème avec la méthode de notation de tableau que vous utilisiez est qu'elle retourne le nœud DOM réel contenu dans l'objet jQuery, et cela ne va pas avoir de méthode text. eq est la méthode jQuery équivalente pour ce faire.

53
James Allardice

Vous pouvez également extraire le premier élément d'un objet jQuery en utilisant d'abord:

alert(siblings(".bar").first().text());
11
Skylar Anderson

http://api.jquery.com/next/ et/ou http://api.jquery.com/prev/ .

Ce serait donc:

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

2
NimChimpsky

Vous pouvez utiliser next () ou prev ();

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

violon ici http://jsfiddle.net/fMT5x/2/

2
Nicola Peluchetti

Vous pouvez soit faire:

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

MAIS, vous devez être sûr qu'un élément précédent existe pour .baz

Ou mieux)

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

OU (PIRE), juste pour référence, ne l'utilisez jamais :)

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

Voici un lien qui est utile pour en savoir plus sur la sélection d'un élément frère dans Jquery.

Comment sélectionner un seul frère avec jQuery

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

vous pouvez également trouver un élément en utilisant le sélecteur Jquery

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

Pour plus d'informations, reportez-vous à ce lien next (), nextAll (), prev (), prevAll (), find () et frères et sœurs dans JQuery

1
Bharath Kumaar