Comment obtenir tous les frères et sœurs d'un élément parent avec des classes spécifiques dans Vanilla JS

hnnnng

J'ai une longue liste d'éléments de liste (générés via une API) et j'aimerais afficher/masquer certains des éléments avec un clic, quelque chose comme un effet d'accordéon.

Les éléments de la liste que je voudrais masquer par défaut ont la classe P-item , et la classe M-item au-dessus d'eux est ce qu'elle devrait déclencher pour qu'ils s'affichent.

Voici mon balisage :

<li class="session-item M-item"></li>
<li class="session-item P-item"></li>
<li class="session-item P-item"></li>
<li class="session-item G-item"></li>

Les éléments P sont les enfants de leur élément M parent. Ainsi, par défaut dans l'exemple ci-dessus, les deux éléments P doivent être masqués et les éléments M et G doivent être affichés. Lorsque l'élément M est cliqué, les deux éléments P cachés s'affichent. Je n'énumère que 4 éléments dans l'exemple ci-dessus, mais la liste continue et le seul séparateur entre cette relation est les éléments G.

Je l'ai fait fonctionner mais il ne montre/cache que le premier frère direct de M-item, j'ai utilisé nextElementSibling, comme ceci:

var acc = document.getElementsByClassName("M-item");
    var i;

    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function () {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.display === "block") {
                panel.style.display = "none";
            } else {
                panel.style.display = "block";
            }
        });
    }

Quelle est la meilleure façon de sélectionner tous les frères et sœurs avec l'élément P, puis de casser, de rechercher un autre élément M et de répéter ?

Existe-t-il quelque chose de similaire à nextAll();Vanilla JS ? Ai-je besoin d'une whileboucle pour itérer sur le prochain frère?

Voici à quoi ressemble mon balisage complet :

entrez la description de l'image ici

gosse

Ma réponse ressemble un peu à l'original, mais utilise une boucle while pour masquer toutes les balises <li> suivantes tant qu'elles ont la classe .P-item. La boucle s'arrête si l'élément suivant n'a pas cette classe, ne cachant donc que les éléments P directement après l'élément M sur lequel on a appuyé. Essayez-le en copiant-collant tout le code suivant ici :

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <style>
        .M-item {
            background-color: red;
            color: blue;
        }

        .active {
            background-color: pink;
        }

        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <ul class="agenda">
        <li class="session-item M-item">something</li>
        <li class="session-item P-item">something</li>
        <li class="session-item P-item">something</li>
        <li class="session-item P-item">something</li>
        <li class="session-item M-item">something</li>
        <li class="session-item P-item">something</li>
        <li class="session-item P-item">something</li>
        <li class="session-item P-item">something</li>
        <li class="session-item P-item">something</li>
        <li class="session-item P-item">something</li>
        <li class="session-item M-item">something</li>
        <li class="session-item P-item">something</li>
        <li class="session-item P-item">something</li>
        <li class="session-item P-item">something</li>
    </ul>
    <script>
        var acc = document.getElementsByClassName("M-item");
        var i;
        for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function () {
                this.classList.toggle("active");
                let next = this.nextElementSibling;

                while (next.classList.contains('P-item')) {
                    next.classList.toggle('hide');
                    next = next.nextElementSibling;
                }
            });
        }
    </script>
</body>
</html>

Articles connexes