Je crée une page FAQ où la réponse est basculée en cliquant sur la question. La question est Comment puis-je basculer tous les i ne peut pas utiliser h3 et la réponse est plusieurs p -éléments. Comme ceci: p -éléments appartenant à une certaine question? My JS bascule tout ce qui suit p -éléments de la page: div s ou classes) .
4 Réponses :
Je le ferais de cette façon: renvoyer false de chaque () termine la chaîne. Je suggérerais aussi, si possible, structurant vos données mieux gérer ce scénario. Par exemple: puis le problème devient trivial pour résoudre:
Vérification du tagName est une bonne idée, ne m'a pas eue. Je suppose que j'étais coincé dans le mode JQuery. Vous voudrez peut-être vérifier pour que l'élément soit basculé également au cas où un paragraphe ne devrait pas être basculé.
Cletus - c'est probablement pour votre faute de frappe avec Nextall au lieu de Nextall et le: au lieu de;
Le meilleur moyen de le faire est d'utiliser chacun et itérant jusqu'à ce que vous arriviez à l'élément suivant qui devrait arrêter l'itération. Retourner false pendant chaque arrête l'itération. L'utilisation du filtre vous permet de vérifier le type de l'élément dans l'itération et de répondre de manière appropriée.
$(function() {
$("p").hide();
$("h3").click(function() {
$(this).nextAll().each( function() {
if ($(this).filter('h3').length) {
return false;
}
$(this).filter('p').toggle();
});
});
});
J'aime mieux votre solution car c'est plus jqueriesh.
Je pense qu'il est probablement important de noter que ce code ne cachera que des balises de paragraphes. Si vous envoyez un texto sans balises de paragraphes ou d'autres balises après votre étiquette H3, cela ne les cachera pas.
@Yogi - Yep, c'est par conception. Si vous souhaitez l'appliquer à des éléments d'enfant, retirez simplement le «filtre ('P») »précédant la bascule.
Voici une solution intéressante qui n'utilise pas .ach () Je recherche la prochaine PS par index. Je ne sais pas à quel point cela est pratique, mais c'était un bon exercice.
IMHO, ce code est beaucoup plus difficile à lire. Je préfère la réponse acceptée.
À mon compte, cela iTère à travers le DOM trois fois pour éviter d'itération à travers les éléments de paragraphe après une seule en-tête une fois. Je vote pour pas pratique. :-)
Aucun problème! Je n'étais pas suggéré que c'était mieux - j'étais juste curieux si cela pouvait être fait sans utiliser .ach (). Bon point ci-dessus.
Yup, a couru ceci via Firebug avec console.Time et console.Timeend, et même avec ce petit morceau de HTML, le code ci-dessus est mal comparé à la réponse acceptée.
Je recommanderais jQuery Nextuntil ();
$(document).ready(function(){
$("p").hide();
$("h3").click(function(){
$("h3").nextUntil("h3").toggle();
});
});