Question

假设我的文档混合了<h1>，<h2> <h3>等，以及<p>等其他元素。

从DOM的角度来看，每个元素都直接位于<body>之下，但很明显，从语义角度来看，元素是按标题级别嵌套的

我正在尝试实现某种slideUp / slideDown轮廓扩展器，所以当用户点击h2时，我需要搜索文档，直到找到h2级或更高级别的另一个标题，然后收集所有中间的元素是在语义上“低于”h2的内容。

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

Answer 1

您可以{/ 3}}使用

$("h2").click(function(){
  $(this).nextUntil("h2")
});

nextUntil()

Answer 2

你不需要使用任何div来包装元素，只需像这样使用.nextUntil(...)

Jquery代码：

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

<强>价：http://api.jquery.com/nextuntil/

现场演示

http://jsfiddle.net/dreamweiver/vag2r/3/

快乐编码：）

jQuery - 选择h1或h2下面的所有文本

2 个答案:

现场演示