3

の内容を取得してから、内容を<h3></h3>小文字にし、スペースを削除して（-または_に置き換えて）、のIDに挿入する必要があります<h3>。

だから、例えば...

<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で大丈夫ですが、これは私にいくつかの問題を引き起こしています。

4

2 に答える 2

8

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;
    }
})();
于 2012-07-23T13:27:57.337 に答える
1

解決策：

$("h3").each(function() {

    var content = $(this).html().replace(/ /g,'_').toLowerCase();
    $(this).attr("id",content);

});
于 2012-07-23T13:30:41.587 に答える