jquery - H3 的内容作为 H3 的 ID

我需要获取 <h3></h3> 的内容，然后将内容小写并删除空格(用 - 或 _ 替换它们)，然后将它们注入(inject) <h3> 的 ID 中。

所以，例如...

<li class="widget-first-list"><h3>About This Stuff</h3></li>
<li class="widget-first-list"><h3 id="about-this-stuff">About This Stuff</h3>

这应该存在于页面上的 h3 负载，因此它需要在某处包含“$this”。

希望这是有道理的 - 我对 jQuery 没问题，但这给我带来了一些问题。

最佳答案

既然您指定了 jQuery，那么您就可以:

$("h3").each(function() {
    var me = $(this);
    me.attr("id",me.text().toLowerCase().replace(/[^a-z0-9-]/g,'-').replace(/--+/g,'-'));
});

这将用 - 替换所有非字母数字字符，然后去除多个连续的 - 字符。

在普通 JS 中(效率更高):

(function() {
    var tags = document.getElementsByTagName("h3"), l = tags.length, i;
    for( i=0; i<l; i++) {
        tags[i].id = tags[i].firstChild.nodeValue.toLowerCase().replace(/[^a-z0-9-]/g,'-').replace(/--+/g,'-');
    }
})();

更好的是，检查重复项:

(function() {
    var tags = document.getElementsByTagName("h3"), l = tags.length, i, newid, n;
    for( i=0; i<l; i++) {
        newid = tags[i].firstChild.nodeValue.toLowerCase().replace(/[^a-z0-9-]/g,'-').replace(/--+/g,'-');
        if( document.getElementById(newid)) {
            n = 1;
            do {n++;}
            while(document.getElementById(newid+'-'+n));
            newid += '-'+n;
        }
        tags[i].id = newid;
    }
})();

关于jquery - H3 的内容作为 H3 的 ID，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11613435/