0

こんにちは、私が達成しようとしていることについてアドバイスをお願いします。

私は現在これを持っています：

<div class="thumbnail">
<img src="thumbnail_1.jpg" />
</div>

それぞれについて.thumbnail、インデックス番号にスパンを追加したいと思います。これを達成する：

<div class="thumbnail">
<span class="index">001</span>
<img src="thumbnail_1.jpg" />
</div>

<div class="thumbnail">
<span class="index">002</span>
<img src="thumbnail_2.jpg" />
</div>

ありがとうございます。

4

4 に答える 4

2 
$('div.thumbnail').each(function(i) {
    var num = zeroPad(i + 1, 3);
    $(this).prepend($('<span/>', {
        'class': 'index',
        'text': num
    }));
});

.each()メソッドは要素を繰り返し処理し、コールバックは要素のゼロベースのインデックスを受け取ります。これで、カウンターが得られます。要素自体はthis(または 2 番目の関数引数として使用できますが、実際には必要ありません)。.prepend()渡された要素/文字列を要素の先頭に挿入します。

関数についてはzeroPad、Google または SO で「pad number javascript」を検索するだけで、かなりの数の関数が見つかります。例を次に示します。

function zeroPad(num, numZeros) {
    var n = Math.abs(num);
    var zeros = Math.max(0, numZeros - Math.floor(n).toString().length );
    var zeroString = Math.pow(10,zeros).toString().substr(1);
    if( num < 0 ) {
        zeroString = '-' + zeroString;
    }
    return zeroString + n;
}
于 2012-01-08T11:58:45.843 に答える
1

これを試して：

$('.thumbnail').each(function(index) {
    $('<span/>', {
         'class': 'index',
         text: "%03d".sprintf(index + 1)
    }).prependTo(this);
});

そのままでは先行ゼロは追加されないことに注意してください。

私はあなたが書くことを可能にするJSXTString.jsモジュールが好きです"%03d".sprintf(index + 1)

http://jsfiddle.net/SqQcs/1/での作業デモ

EDITコードは最初の試行から変更されました-$(<tag>, { ... })構文はjQueryコンストラクターでのみ機能し、一般化されたjQuery引数の場合では機能しないことを忘れました。

于 2012-01-08T11:58:53.143 に答える
1

サムネイルクラスですべての要素を選択し、それらをループして、インデックスを含む各要素の前にスパンを追加できます。

// Select all elements with class .thumbnail and loop over them
$(".thumbnail").each(function(i, elm) {
   // Prepend a index span to each element
   $(elm).prepend('<span class="index">' + i + '</span>");
});

この場合、インデックスは数値になり、ゼロベースになります。インデックスを1で開始する場合は、中央の行を次のように変更できます。$(elm).prepend('<span class="index">' + (i + 1) + '</span>");

于 2012-01-08T11:58:59.493 に答える
1

他の解決策とともに、私は次のことを好みます（個人的な好み）

$('div.thumbnail').prepend(function (index) {
    index = '000' + (index + 1);
    return '<span class=index>' + index.substr(index.length - 3) + '</span>';
});

このprependメソッドは、先頭に追加される html/DOM オブジェクトを返す関数を受け取ります。ドキュメントで詳細を参照してください。

編集:Michael Durrant がコメントしたように、連番ではなく、img'ssrc属性の番号が必要な場合があります。その場合は、以下でカバーする必要があります。

$('div.thumbnail > img').before(function () {
    var index = this.src.match(/\d+/);
    if (index === null) return;
    index = '000' + index;
    return '<span class=index>' + index.substr(index.length - 3) + '</span>';
});

ここではbefore、img要素にスパンを追加します。詳細については、beforeドキュメントを参照してください。

于 2012-01-08T12:04:00.170 に答える