javascript - 指示 jquery 内容表的顶部标题

Question

我正在制作一个自动目录，一切正常。我只需要将顶部标题指定为“粗体”

jQuery(document).ready(function(){
var ToC =
  "<nav role='navigation' class='table-of-contents vNav'>" +
    "<ul class='vNav'>";

var newLine, el, title, link;

$(".right_section .intro_title h2, .right_section .section_one_content h2, .right_section .p_section_title h3").each(function() {

    el = $(this);
    title = el.text();
    //link = "#" + el.attr("id");
    link = "#" + el.text();

    $(this).attr('id', title);  

if ($( ".right_section .intro_title h2" )) {
    newLine =
    "<li class='vNav_heading'>" +
      "<a href='" + link + "'>" +
        title +
      "</a>" +
    "</li>";    
} else {
    newLine =
    "<li class='vNav_lists'>" +
      "<a href='" + link + "'>" +
        title +
      "</a>" +
    "</li>";
}

    ToC += newLine;

});

ToC +=
   "</ul>" +
  "</nav>";

$(".toc").prepend(ToC);
}); // END DOM

上面的代码在应该检测到(.right_section .intro_title h2)有一个类“.vNav_heading”时向所有添加一个类(.vNav_lists)，其余的应该是“.vNav_lists”

这是 HTML 标记，这是基于 WordPress 所见即所得编辑器

<div class="left_section">
<div class="toc"></div>
</div>

<div class="right_section">

<div class="intro_title">
    <h2>title</h2>
</div>
<p>lorem ipsum dolor</p>
<p>lorem ipsum dolor</p>
<p>lorem ipsum dolor</p>

<div class="section_one_content">
    <h2>title</h2>
</div>
<p>lorem ipsum dolor</p>
<p>lorem ipsum dolor</p>


<div class="p_section_title">
    <h3>title</h3>
</div>
<p>lorem ipsum dolor</p>
<p>lorem ipsum dolor</p>


<div>

这是结果，但每个顶部标题上都应该有一个 .vNav_heading 类。

<div class="toc">
<nav role="navigation" class="table-of-contents vNav">
<ul class="vNav">
<li class="vNav_lists"><a href="#text">class should be .vNav_heading</a></li>
<li class="vNav_lists"><a href="#text">Text</a></li>
<li class="vNav_lists"><a href="#text">Text</a></li>
<li class="vNav_lists"><a href="#text">Text</a></li>
<li class="vNav_lists"><a href="#text">class should be .vNav_heading</a></li>
<li class="vNav_lists"><a href="#text">Text</a></li>
<li class="vNav_lists"><a href="#text">Text</a></li>
</ul>
</nav>
</div>

希望它可以理解，我无法很好地解释它

Answer 1

您需要检查父级是否有类“intro_title”

$(function(){
var ToC =
  "<nav role='navigation' class='table-of-contents vNav'>" +
    "<ul class='vNav'>";

var newLine, el, title, link;

$(".right_section .intro_title h2, .right_section .section_one_content h2, .right_section .p_section_title h3").each(function() {
    el = $(this);
    title = el.text();
    //link = "#" + el.attr("id");
    link = "#" + el.text();

    $(this).attr('id', title);  

if ($(this).closest(".intro_title").length) {
    newLine =
    "<li class='vNav_heading'>" +
      "<a href='" + link + "'>" +
        title +
      "</a>" +
    "</li>";    
} else {
    newLine =
    "<li class='vNav_lists'>" +
      "<a href='" + link + "'>" +
        title +
      "</a>" +
    "</li>";
}

    ToC += newLine;

});

ToC +=
   "</ul>" +
  "</nav>";

console.log(ToC);
$(".toc").prepend(ToC);
}); // END DOM

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toc">
</div>

<div class="right_section">

<div class="intro_title">
    <h2>title</h2>
</div>
<p>lorem ipsum dolor</p>
<p>lorem ipsum dolor</p>
<p>lorem ipsum dolor</p>

<div class="section_one_content">
    <h2>title</h2>
</div>
<p>lorem ipsum dolor</p>
<p>lorem ipsum dolor</p>


<div class="p_section_title">
    <h3>title</h3>
</div>
<p>lorem ipsum dolor</p>
<p>lorem ipsum dolor</p>


</div>