JQuery .nextUntil() 选择标题进入 li

Posted 2023-05-09

【中文标题】JQuery .nextUntil() 选择标题进入 li

【英文标题】：JQuery .nextUntil() selecting heading into li

【发布时间】：2020-07-10 19:02:45

【问题描述】：

我正在尝试使用 .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: []

]

【参考方案1】：

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

---

jQuery .nextUntil() 需要一个分隔符（就像您的示例中的 <h2> 一样）。因此，嵌套<h3> 元素的 HTML 代码的最后一部分不会被处理。 首先，因为末尾没有<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> 用于演示目的，因此您可以识别最后一部分！

【讨论】：

首先感谢您的帮助 h2 下方的 h3 标签不会被处理.如果您将ol 移动到第二个h2 下方而不是最后一个下方，则不会从ol 中获取所有h3，而会获取不在内部的h3 ol 在最后一个 h2 之后，没有分隔符标记。

是的，它确实需要一个分隔符......否则它会在您的数组中包含意外的以下节点:) 我刚刚更新了我的答案以适应不同的代码模式。但是我的第一条评论仍然有效，我只是添加了另一种情况下缺少的内容。该代码已经处理了任何类似的模式...由您来处理异常:)

非常感谢，这是一个非常好的进展，它只适用于 <li> https://prnt.sc/rpple0 中的 h3，但 不是 到 <li> 中的 h3 不是检测到，请注意我使用的是 jquery 3.4.1 https://code.jquery.com/jquery-3.4.1.js。

请在此处找到带有控制台日志https://playcode.io/533251的详细示例

【参考方案2】：

感谢Bilel'seach()和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++;

);

或者我们可以将if() 语句放入简单的for() 循环中，具体取决于页面中所有h2标签数组的长度

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());

  

;