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

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

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>

希望它稳定，我无法很好地解释它

最佳答案

您需要检查父级是否具有“ 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>

关于javascript - 在内容jquery的表上指示顶部标题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60349318/