如何在帖子中獲取所有版塊的ID？

Question

有沒有一種方法可以在Wordpress帖子內容中獲取ID？ 例如，我的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中的所有.main-content都是post_content() 。 我需要的是獲取#jumbotron ， #about ， #projects和#contacts並使用foreach打印出一定數量的li。

<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>

那有可能嗎？ 我嘗試尋找解決方案，但無法從wordpress api中找到解決方案。

Answer 1

我一定會用jQuery做到這一點。 提供多種解決方案：

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

要么

$('.main-content > *')

Answer 2

畢竟我是用jQuery完成的。 該代碼在我的自定義腳本JS文件中，並且在我的php模板文件中創建了一個容器#uList。

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 3

只需將適當的元素收集到一個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>