Question

我有一个微小的jQuery函数，可以向每个标头添加一个ID（为了在TOC中用作定位符）。

$(":header").each(function() {
    let eachID = $(this)
    .text()
    .toLowerCase()
    .replace(/[^\w ]+/g, "")
    .replace(/ +/g, "-");
    $(this).attr({ id: eachID });
});

根据需要工作。 <h1>Hello World</h1>成为<h1 id="hello-world">Hello World</h1>。

我遇到了可能重复/重复的标题的问题。

我在SO上找到了许多答案，最接近的是this one。

这个标题的小麻烦是，它在第一个标题之后为所有标头添加+1，而不仅仅是重复的标题。

在此codepen中，您可以看到<h2>Hello World</h2>已正确地更改为<h2 id="hello-world2">Hello World</h2>，但是<h1>So long World</h1>也是正确的，即使它不需要更改。

任何帮助将不胜感激。

Answer 1

使用document.querySelectorAll解决问题的一种方法（$(idSelector)总是返回ID为id的第一个元素，因为ids无论如何在页面上都是唯一的）以获取带有特定的id并检查其长度。

理想情况下，您不想这样做。

$(':header[id]').not(':eq(0)').each(function(i){ 
    var $that = $(this);
      var currentId = $that.attr('id');
      var elemsWithId = document.querySelectorAll('#' + currentId);

      if(elemsWithId.length > 1) {
         var newID = currentId + (i + 1);
         $that.attr('id', newID);
      }
});

Codepen

jQuery：如果需要，动态更改锚点数据属性

1 个答案: