Укажите верхний заголовок в таблице содержания jquery

Question

Я делаю автомат c Содержание, все работает нормально. Мне просто нужно указать верхний заголовок, чтобы он был "жирным"

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

Приведенный выше код добавляет класс (.vNav_lists) для всех, когда он должен обнаружить (.right_section .intro_title h2) иметь класс " .vNav_heading ", а остальные должны быть. быть классом .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>