4

前の各要素の幅を取得して合計する方法（ページの読み込み後）

次に、各要素のデータ属性に値を入力します

これはjsfiddle http://jsfiddle.net/jSfKJ/2/

のコードです ので、これを作成する方法コード

<ul>
 <li style="width:130px">Num 1</li>
 <li style="width:150px">Num 2</li>
 <li style="width:140px">Num 3</li>
 <li style="width:175px">Num 4</li>
 <li style="width:100px">Num 5</li>
</ul>

このようになる

<ul>
 <li style="width:130px" data-num="0">Num 1</li>
 <li style="width:150px" data-num="130">Num 2</li>
 <li style="width:140px" data-num="280">Num 3</li>
 <li style="width:175px" data-num="420">Num 4</li>
 <li style="width:100px" data-num="595">Num 5</li>
</ul>


ここに画像の説明を入力
この画像は、私が何を望んでいるかをより明確に説明するためのものです

4

3 に答える 3

6

それを行う簡単な方法は次のとおりです。http://jsfiddle.net/jSfKJ/5/

var を保存して、 each に要素の幅を追加します。

(function(){
    var total = 0;
    $('li').each(function() {
        $(this).attr('data-num', total)
        total += $(this).width()
    });
})();

eachこの方法により、の数を 1に減らすことができます

于 2013-05-18T19:39:50.950 に答える