Javascript jQuery-选择所有文本；在下面；a h1或h2

假设我有一个混合了

，

等元素的文档，再加上其他元素，如

从DOM的角度来看，每个元素都直接位于

下，但从语义的角度来看，元素是按标题级别嵌套的

我试图实现某种类型的slideUp/slideDown大纲扩展器，例如，当用户单击h2时，我需要搜索文档，直到找到另一个h2级或更高级别的标题，然后收集中间的所有元素，作为语义上“在”该h2下的内容

目前，我假设我只需要将其全部封装在嵌套的div中，以使DOM树嵌套与语义匹配，但是有什么方法可以避免这种情况吗？

您可以使用它

---

您不需要使用任何div来包装元素，只需像这样使用

.nextUntil（…）

Jquery代码：

$('h2').on('click',function (){
       var dom=$(this).nextUntil('h2');
       if($(dom).is(":hidden")){
            $(dom).show(); 
       }
       else{
            $(dom).hide(); 
       }           
});

Ref:

$('h2').on('click',function (){
       var dom=$(this).nextUntil('h2');
       if($(dom).is(":hidden")){
            $(dom).show(); 
       }
       else{
            $(dom).hide(); 
       }           
});

现场演示

---

快乐编码：）

你能提供一个HTML结构/代码的示例吗？你已经在jquery中找到了.nextUntil检查这个答案Andy。您最好将其包装起来，使HTML结构更加一致。您可以使用

.nextUntil（）

进行此过程，在两个目标元素之间选择元素，并隐藏它们以折叠或在展开时显示它们。ref：表示“获取每个元素的所有后续同级，直到但不包括由选择器、DOM节点或传递的jQuery对象匹配的元素。”因此它不会避免“使树嵌套与语义匹配”是的，我认为nextUntil是关键，尽管它不是整个解决方案。如果用户点击h3，那么我将不得不使用nextUntil（“h1，h2，h3”），但这并不太繁重。我还必须处理他们点击最后一个标题（或者在内容末尾放一个虚拟的不可见h1）的情况。最后，我不需要用户点击最后一个标题的特殊情况，因为nextUntil在这种情况下会拾取所有剩余的兄弟。还请注意，使用此解决方案，scrollDown（）将同时分别为每个段落设置动画，而不是将整个段落集作为一个单元向上滚动，但视觉效果对我来说很好。