JQuery .nextUntil() 选择标题到 li

Question

我正在尝试 select 使用 .nextUntil() 将 h2 标签下的所有 h3 标签都放入 li，无论是 ul 还是 ol。

HTML 标记如下：

<h2></h2>
  <h3></h3>
  <h3></h3>
  <h3></h3>
<h2></h2>
  <h3></h3>
  <h3></h3>
  <h3></h3>
<h2></h2>
  <ol>
    <li>
     <h3></h3>
    </li>
    <li>
     <h3></h3>
    </li>
    <li>
     <h3></h3>
    </li>
  </ol>

Js 就像：

var h2s = $('h2').toArray();

var h3s = [];

for (i = 0, i < h2s.length, i++){

  h3s.push($('h2').eq(i).nextUntil('h2', 'h3, li h3').toArray());

};

console.log(h3s);

预期输出为：

h3s[

 0: (3) [h3, h3, h3]
 1: (3) [h3, h3, h3]
 2: (3) [h3, h3, h3]

]

而实际输出是：

h3s[

 0: (3) [h3, h3, h3]
 1: (3) [h3, h3, h3]
 2: []

]

Answer 1

[更新以适应不同的代码模式]

jQuery .nextUntil() 需要一个定界符（如示例中的 <h2> ）。因此 HTML 代码的最后一部分 <h3> 元素嵌套将不会被处理。首先，因为末尾没有 <h2>。其次，因为他们不是兄弟姐妹。

使用你的代码，我刚刚添加了一个条件推送，我首先检查 <h3> 是否是下一个元素。

var h3s = [];
i=0;
$( "h2" ).each( function( index, element ){
  if($(this).next('h3').length>0){
    if($(this).is('h2:last-of-type')){
h3s.push($('h2').eq(i).nextUntil('section').toArray());

} else {
  h3s.push($('h2').eq(i).nextUntil('h2').toArray());
  } }  else{
  h3s.push($('h2').eq(i).nextUntil('h2').find('h3').toArray());
  }
  i++;
});

console.log(h3s);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2></h2>
  <h3></h3>
  <h3></h3>
  <h3></h3>
<h2></h2>
  <ol>
    <li>
     <h3></h3>
    </li>
    <li>
     <h3></h3>
    </li>
    <li>
    
    </li>
  </ol>
<h2></h2>  
  <h3></h3>
  <h3></h3>
  <h3></h3>
<section>

PS: 请注意，为了演示目的，我删除了最后的 <h3>，因此您可以识别最后一部分！

Answer 2

多亏了Bilel's each() & if(){}.

，我经过多次实验才弄明白

这是一个带有控制台的完整示例 https://playcode.io/533251。

获取每个 h2 标签下方的所有 h3 标签，即使它们在 <ol> 或 <ul>

中

var h3s = [];

var i = 0;

$('h2').each(function(){

  if ($('h2').eq(i).nextUntil('h2').find('h3').length > 0) {

     h3s.push($('h2').nextUntil('h2').find('h3').toArray());

  } else {

     h3s.push($('h2').eq(i).nextUntil('h2', 'h3').toArray());

  } i++;

});

或者我们可以根据页面中所有h2标签的数组长度将if(){}语句放入简单的for(){}循环

var h2s = $('h2').toArray();

var h3s = [];

for (i = 0; i < h2s.length; i++) {

  if ($('h2').eq(i).nextUntil('h2').find('h3').length > 0) {

     h3s.push($('h2').nextUntil('h2').find('h3').toArray());

  } else {

     h3s.push($('h2').eq(i).nextUntil('h2', 'h3').toArray());

  }

};

JQuery .nextUntil() 选择标题到 li

JQuery .nextUntil() selecting heading into li

jquery

jquery-selectors

nextuntil