jQuery nextAll - Clique na h-elemento alterna todos os elementos-p até a próxima h
-
22-08-2019 - |
Pergunta
Estou criando uma página de FAQ, onde a resposta é alternado clicando sobre a questão. A questão é h3
ea resposta é vários p
-elementos. Como esta:
<h3>The First Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
<h3>The Second Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
Como posso alternar todos os elementos-p
pertencentes a uma determinada pergunta? Meu JS alterna todos os seguintes p
-elementos na página:
$(document).ready(function(){
$("p").hide();
$("h3").click(function(){
$(this).nextAll("p").toggle();
});
});
Eu não posso usar div
da ou classes).
Solução
A melhor maneira de fazer isso é usando cada um e repetindo até chegar ao elemento seguinte que deve parar a iteração. Retornando falsa durante uma cada pára a iteração. Usando filtro permite que você verifique o tipo do elemento na iteração e responder apropriadamente.
$(function() {
$("p").hide();
$("h3").click(function() {
$(this).nextAll().each( function() {
if ($(this).filter('h3').length) {
return false;
}
$(this).filter('p').toggle();
});
});
});
Outras dicas
Gostaria de fazê-lo desta maneira:
$(function() {
$("p").hide();
$("h3").click(function() {
$(this).nextAll().each(function() {
if ($(this).is('h3')) {
return false;
}
$(this).toggle();
});
});
});
Voltando falso a partir de cada () termina a cadeia.
Eu também sugeriria, se possível, estruturar seus dados melhor para lidar com esse cenário. Por exemplo:
<h3 class="question">Why is there no soup for me?</h3>
<div class="answer">
<p>...</p>
<p>...</p>
<p>...</p>
</div>
e, em seguida, o problema se torna trivial para resolver:
$(function() {
$("div.answer").hide();
$("h3.question").click(function() {
$(this).next().toggle();
});
});
Aqui é uma solução interessante que não usa .each ()
$("h3").click(function() {
var idx = $("h3,p").index(this);
var nextIdx = ($("h3,p").index($(this).nextAll("h3")));
var nextPs = (nextIdx == -1) ? $("h3,p").length - idx : nextIdx - idx;
$(this).nextAll("p:lt(" + (nextPs - 1) + ")").toggle();
});
Eu estou procurando a próxima Ps pelo índice. Não sei como prática este é, mas foi um bom exercício.
Eu recomendaria jQuery nextUntil ();
$(document).ready(function(){
$("p").hide();
$("h3").click(function(){
$("h3").nextUntil("h3").toggle();
});
});