Javascript 如何在 Vanilla JS 中获取具有特定类的父项的所有sibling 姐妹

发布于05月25日

我有一个很长的列表项目列表(通过API生成)，我想通过单击显示/隐藏一些项目，类似手风琴效果.

默认情况下，我想隐藏的列表项有P-item个类，它们上面的M-item个类应该触发它们显示出来.

以下是我的标记:

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

P项是其父M项的子项.因此，在上述示例中，默认情况下，应隐藏两个P项，并显示M项和G项.单击M项时，将显示两个隐藏的P项.在上面的示例中，我只列出了4个项目，但列表还在继续，这种关系之间的唯一分隔符是G项目.

我成功了，但它只显示/隐藏了M-item的第一个直接sibling ，我使用了nextElementSibling，如下所示:

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";
            }
        });
    }

Select 具有P项的所有同级项，然后断开，查找另一个M项并重复的最佳方法是什么？

Vanilla JS中是否有类似于nextAll();的东西？我是否需要while循环来迭代下一个同级循环？

下面是我的完整标记的样子:

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

Javascript 如何在 Vanilla JS 中获取具有特定类的父项的所有sibling 姐妹

推荐答案

Javascript相关问答推荐

有Angular 的material .未应用收件箱中的价值变化

Vega中的模运算符

vscode扩展-webView Panel按钮不起任何作用

将字符串UTC Date转换为ngx—counting leftTime配置值的数字

在grafana情节，避免冲突的情节和传说

在286之后恢复轮询

将核心模块导入另一个组件模块时存在多个主题

检索相加到点的子项

使用VUE和SCSS的数字滚动动画(&；内容生成)

当我在Reaction中创建一个输入列表时，我的输入行为异常

如何在 Select 文本时停止Click事件？

将异步回调转换为异步生成器模式

使用Ace编辑器对子组件实例的native-element 进行Angular 获取时面临的问题

使每个<；li>；元素的 colored颜色与随机生成的 colored颜色列表不同(不重复

在Odoo中如何以编程方式在POS中添加产品

为什么延迟在我的laravel项目中不起作用？

使用CEPRESS截取时，cy.Wait()在等待5000ms的第一个路由请求时超时

如何用react组件替换dom元素？

使用jQuery每隔几秒钟突出显示列表中的不同单词

如果我将高度设置为其内容的100%，则在Java脚本中拖动以调整面板大小时会冻结