查找并列出所有包含 ID 的标头 - jQuery答案

【问题标题】：Find and list all headers that have an ID included - jQuery查找并列出所有包含 ID 的标头 - jQuery
【发布时间】：2023-04-05 00:48:01
【问题描述】：

如何在包含 ID attr 的页面上找到所有 h3，将它们保存到数组中，然后将它们作为列表输出到其他地方（以 H3 作为值，将 id 作为 href ）？最好使用 jQuery，否则可能使用 PHP。

这是我迄今为止创建数组的方法（我更喜欢将它们放在一个数组中）：

var ids = [];
var values = [];

i = 0;
e = 0;
$('h3').each(function()
{
if($(this).attr('id')){
   ids[i++] = $(this).attr('id');
   values[e++] = $(this).text();
}
});

如果我们有这样的 HTML：

<div class="headers">
  <h3 id="first">First</h3>
    <h3 id="second">Second</h3>
    <h3>None</h3>
    <h3 id="third">Third</h3>
    <h3>None Do not Show</h3>
</div>

<div class="headers-in-here"></div>

我希望“headers-in-here”中的输出为：

<li><a href="#first">First</a></li>
<li><a href="#second">Second</a></li>
<li><a href="#third">Third</a></li>

【问题讨论】：

标签： html jquery

【解决方案1】：

您可以使用选择器h3[id]（标签选择器和attribute presence selector 的组合）找到所有具有id 的h3 元素，然后将其映射到您想要的结构。例如：

const headers = $("h3[id]").get().map(element => ({id: element.id, text: $(element).text()}));

然后使用该数组生成您想要的内容；也许：

$(".headers-in-here").html(
    headers.map(({id, text}) => `<li><a href="#${id}">${text}</a></li>`).join("")
);

现场示例：

const headers = $("h3[id]").get().map(element => ({id: element.id, text: $(element).text()}));
$(".headers-in-here").html(
    headers.map(({id, text}) => `<li><a href="#${id}">${text}</a></li>`).join("")
);

<div class="headers">
  <h3 id="first">First</h3>
    <h3 id="second">Second</h3>
    <h3>None</h3>
    <h3 id="third">Third</h3>
    <h3>None Do not Show</h3>
</div>

<div class="headers-in-here"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

或者您可以一步完成，而不是使用中间对象数组，但您特别提到需要一个数组。这是一步：

$(".headers-in-here").html(
    $("h3[id]").get().map(element => `<li><a href="#${element.id}">${$(element).text()}</a></li>`).join("")
);

现场示例：

$(".headers-in-here").html(
    $("h3[id]").get().map(element => `<li><a href="#${element.id}">${$(element).text()}</a></li>`).join("")
);

<div class="headers">
  <h3 id="first">First</h3>
    <h3 id="second">Second</h3>
    <h3>None</h3>
    <h3 id="third">Third</h3>
    <h3>None Do not Show</h3>
</div>

<div class="headers-in-here"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：