0

リンクからテキストを取得し、クラスとして a タグに追加する素晴らしいスニペットを Stack で見つけました。

$('a.nav').each(function() {

    // add class with name of the link's text
    $(this).addClass($(this).text());
});

(numbers), e.g. (19)リンクテキストの後に出力されるリンクされた検索結果のリストがあることを除いて、それはうまく機能します。

したがって、上記の JQuery を適用した後の HTML の構造は次のようになります。

<li><a class="Basic page (1)" href="#">Basic page (1)</a></li>
<li><a class="Blog (19)" href="#">Blog (19)</a></li>
<li><a class="News (4)" href="#">News (4)</a></li>

ご覧のとおり、理想的ではありません。可能であれば、少なくとも括弧内の数字、つまり などを取り除き、ダッシュとテキストと小文字を入れたいと思い(1)ます(19)。これはファセット検索結果用であるため、リンクがすべて一緒になったり、同じ順序になったりすることはありません。リンクテキスト名に基づいて動的クラスを適用しようとしているだけなので、テーマ領域で他のことを行うことができます。

したがって、この：

<li><a class="Basic page (1)" href="#">Basic page (1)</a></li>

... は次のようになります。

<li><a class="basic-page" href="#">Basic page (1)</a></li>
4

4 に答える 4

2

以下のようなものを試してください、

デモ

$(function() {
    $.each($('ul li a'), function() {
        var text = $(this).text();
        this.className = $.trim(text.replace(/\(\d*\)/g, '').toLowerCase()).replace(/\s/, '_');
    });
});
于 2012-05-02T16:05:18.847 に答える
1 
$('a.nav').each(function() {
    var oSelf = $(this);
    var sClass = oSelf.html()
        .toLowerCase()
        .replace(/(\w)(\W\([0-9]+\))/, '$1')
        .replace(' ', '-');
    oSelf.addClass(sClass);
});
于 2012-05-02T16:03:00.430 に答える