JQuery next (): Obtenir le frère suivant en utilisant uniquement des classes
Je suis en train de créer quelque chose comme un web accordéon.
Visual exemple:
[TITLE DIV 1]
[CONTENT DIV 1]
[TITLE DIV 2]
[CONTENT DIV 2]
[TITLE DIV 3]
[CONTENT DIV 3]
Je veux être en mesure de basculer (jquery fonction toggle()) un "Contenu de la Div" en cliquant sur le Titre "Div".
J'ai essayé, mais ça ne fonctionne pas.
HTML:
<div class="topSeparator"></div>
<div class="titleDiv">
<h1>Title 1</h1>
</div>
<div class="bottomSeparator"></div>
<div class="contentDiv"><h2>Content 1</h2></div>
<div class="topSeparator"></div>
<div class="titleDiv">
<h1>Title 2</h1>
</div>
<div class="bottomSeparator"></div>
<div class="contentDiv"><h2>Content 2</h2></div>
JQUERY:
$('.titleDiv').click(function() {
$(this).next('.contentDiv').toggle();
});
Je décrirais ma fonction de processus en tant que tel:
- Lorsque vous cliquez sur un élément avec une classe nommée "titleDiv", n':
1.1. Sélectionnez cliqué élément;
1.1.1. Sélectionnez le frère suivant de l'élément cliqué avec une classe nommée "contentDiv";
1.1.1.1. La fonction toggle() loi sur ce dernier élément (Avec le nom de la classe "contentDiv");
Il semble que je me trompe ou il me manque quelque chose.
.
Je suis, y compris jquery 1.8.3 (Correctement).
Cela fonctionne lors de l'utilisation de l'ID au lieu de classes (j'essaie d'éviter de les utiliser).
J'ai placé une alerte à l'intérieur de la fonction de clic et cela fonctionne (Le problème est à l'intérieur).
OriginalL'auteur Edu | 2013-02-15
Vous devez vous connecter pour publier un commentaire.
Utilisation
.nextAll()
et:first
pour obtenir le prochain contentDivDémo ici http://jsfiddle.net/Cs3YY/1/
prochaine obtient l'élément directement après qui dans ce cas est bottomSeparator. À l'aide de nextAll obtient tous les éléments après, mais à l'aide :tout d'abord obtient le premier élément avec le sélecteur(".contentDiv")
Ne devrait pas next('.contentDiv') sélectionner l'élément suivant qui est égale ne l'argument fourni (Classe contentDiv)?
Non, suivant que le prochain élément, l'écriture d'un sélecteur en suivant permet d'obtenir l'élément suivant si il a le sélecteur sinon, il obtient la valeur null
Je comprends maintenant. C'était un problème de l'anglais quand j'ai lu la documentation, je l'ai enseigné de comparer jusqu'à ce qu'il trouve effectivement un frère ou une sœur, mais il semble qu'il se contente de comparer le frère suivant. Merci Anton.
OriginalL'auteur Anton
Bien, c'est parce que next() sélectionnez le bottomSeparator. Vous pouvez utiliser cette astuce
http://jsfiddle.net/Cs3YY/12/
Si, pour une raison que j'modifier la structure HTML (enlever le séparateur de div ou d'ajouter quelque chose avant/après le séparateur), ce serait d'arrêter de travailler.
Oui, c'est juste un truc et pas très fexibilité, mais je pensais que ça montre ce qui a été mauvais.
OriginalL'auteur luxcem