如何使用jQuery查找带ID属性的h3标签并生成锚点链接列表

jQuery 实现（推荐） #

你可以直接使用属性选择器精准筛选带id属性的h3标签，同时将所有数据存入单个数组，最终生成目标列表插入指定容器，完整代码如下：

// 初始化单个数组存储所有h3相关数据
let headingList = [];
// 直接筛选带id属性的h3，无需额外判断
$('h3[id]').each(function() {
  const $this = $(this);
  headingList.push({
    id: $this.attr('id'),
    text: $this.text().trim()
  });
});

// 生成列表HTML插入目标容器
let listHtml = '';
headingList.forEach(item => {
  listHtml += `<li><a href="#${item.id}">${item.text}</a></li>`;
});
$('.headers-in-here').html(listHtml);

如果你需要保留原有数组的处理逻辑做适配，基于现有代码调整为单数组存储的逻辑和上述方案一致。

PHP 实现（服务端渲染场景） #

如果是在服务端解析HTML输出结果，可以用DOM扩展实现：

$html = <<<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>
HTML;

$dom = new DOMDocument();
libxml_use_internal_errors(true);
$dom->loadHTML($html);
libxml_clear_errors();
$xpath = new DOMXPath($dom);
// 筛选带id属性的h3节点
$h3Nodes = $xpath->query('//h3[@id]');

$output = '';
foreach ($h3Nodes as $node) {
  $id = $node->getAttribute('id');
  $text = trim($node->nodeValue);
  $output .= "<li><a href=\"#{$id}\">{$text}</a></li>\n";
}

// 输出到指定位置即可
echo $output;

内容的提问来源于stack exchange，提问作者user2115227