在目录 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>