-2

Wordpress サイトで、色付きの数字で番号付きリストのように見えるものを作成する必要があります。

これをhtmlで手作業で作成する方法を知っています。いくつかの方法がありますが、次のような順序付けられていないリストを介して番号付きアイテムを作成するとしましょう

<li><span>1. </span>Lorem ipsum dolor sit amet</li>

CSS list-style:none を使用して箇条書きを簡単に削除します。

ただし、このサイトにはこれらのリストがたくさんあり、すべての html を編集したくありません。HTMLを知らないユーザーでも作成できるようにWordpressの標準OLで管理したい。

margin-left と負の text-indent で数字を「掛ける」と思います。

jQueryでこれを処理する最も効率的な方法は何ですか?

4

2 に答える 2

0

spanCSSの面ではかなり大丈夫なようです。そのため、リストの先頭にsを配置する方法を探しています。

もしそうなら：

$("ol > li").each(function() {
    var $this = $(this);
    $this.prepend("<span>" + ($this.index() + 1) + " </span>");
});

おそらく、そこにクラスを追加して、JavaScriptが実行されていない場合は退屈な古い数値を取得しますが、実行されている場合はスタイル付きの数値を取得します。

$this.addClass('styled');

実例| ソース

補足：を使用せずに、代わりにspans疑似セレクターなどを使用できる場合:beforeは、それをサポートするブラウザーの方が適している可能性があります。

于 2012-12-22T22:45:21.873 に答える
0

1ページに複数のOLがある場合（リストが1つしかない場合も同様に機能します）。ネストされたリストでも機能します。

/* loop over each list so indexing of LI is done on per list basis*/
$("ol").each(function(){    
    $(this).children('li').each(function(index) {   
        $(this).prepend("<span>" + (index+ 1) + " </span>");
    });    
});
于 2012-12-22T22:53:42.710 に答える