Как получить все идентификаторы разделов в сообщении?

Question

есть ли способ получить идентификаторы в содержании WordPress?Например, у меня есть такая структура в моем post_content ():

get_header()

<div class="main-content">
  <section id="jumbotron">
    <div class="container">
      <!-- SOME CONTENT !-->
    </div>
  </section>
  <section id="about">
    <div class="container">
      <!-- SOME CONTENT !-->
    </div>
  </section>
  <section id="projects">
    <div class="container">
      <!-- SOME CONTENT !-->
    </div>
  </section>
  <section id="contacts">
    <div class="container">
      <!-- SOME CONTENT !-->
    </div>
  </section>
</div>

get_footer()

Так что все в .main-content - это post_content().Мне нужно получить #jumbotron, #about, #projects и #contacts и напечатать это количество li с foreach.

<ul>
  <li><a href="#jumbotron">Jumbotron</a></li>
  <li><a href="#about">Jumbotron</a></li>
  <li><a href="#projects">Jumbotron</a></li>
  <li><a href="#contact">Jumbotron</a></li>
</ul>

Возможно ли это вообще?Я пытался найти решение, но не могу найти что-то из API WordPress, который делает это.

Answer 1

В конце концов я сделал это с помощью jQuery.Код находится в моем файле JS пользовательских скриптов, и я создал контейнер #uList в моем файле шаблона php.

var IDs = $(".main-content section[id]") 
  .map(function() { return this.id; })
  .get(); 

$listSelector = $("#uList")
  $.each(IDs, function(i, obj) {
    $listSelector.append("<li><a href=#"+obj+">"+obj+"</a></li>")
});

Answer 2

Просто соберите соответствующие элементы в объект JQuery, затем выполните цикл по объекту и создайте нужный вывод:

let results = "<ul>";
$(".main-content > section[id]").each((i,el)=>{ 
  results += "<li><a href='#" + el.id + "'>" + el.id + "</a></li>";
});

$(document.body).append(results + "</ul>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-content">
  <section id="jumbotron">
    <div class="container">
      <!-- SOME CONTENT !-->
    </div>
  </section>
  <section id="about">
    <div class="container">
      <!-- SOME CONTENT !-->
    </div>
  </section>
  <section id="projects">
    <div class="container">
      <!-- SOME CONTENT !-->
    </div>
  </section>
  <section id="contacts">
    <div class="container">
      <!-- SOME CONTENT !-->
    </div>
  </section>
</div>

Answer 3

Я обязательно сделаю это с помощью jQuery.Доступно несколько решений:

$('.main-content').children()

или

$('.main-content > *')