3

あなたはhttp://jsfiddle.net/6gnAF/1/で問題を見ることができます

リスト要素にほとんど問題はありません。

私は次のような非常に単純な順序なしリストを使用しています。

<div>
  <ul>
    <li class='button'>Element 1</li>
    ...
    <li class='button'>Element N</li>
  </ul>
</div>

（リスト要素の数Nは、ページごとに異なります。）

divを含むは幅ですul。696 pxリスト要素li、、は水平方向に整列され、divの幅の終わりに達すると、新しい行に続きます。

すべての行.leftの最初にクラスを追加し、最後の行にクラスを追加したかったのです。li.right

    $('li').each(function() {
        var liWidthOut = $(this).width();
        totalWidth += liWidthOut;
        if (totalWidth >= divWidth) {
            $(this).addClass("left");
            $(this).prev().removeClass("middle").addClass("right");
            totalWidth = liWidthOut;
        }
        else {
            $(this).addClass("middle");
        }
     });

私はそれをJqueryで管理しましたが、少し問題があります。

あなたはhttp://jsfiddle.net/6gnAF/1/で問題を見ることができます

問題は、クラスが追加される要素の幅を変更する.leftため、新しい行が作成されることがあり、最後のli要素が。ではなくクラスを持つ最初の要素になります。.rightli.right.left

どうすればこれを修正できますか？

（文法上の誤りでごめんなさい）

4

3 に答える 3

5

top幅を計算する代わりに位置を追跡するように方法を変更しましたが、問題なく機能しているようです。width()パディングやボーダーなどで使用すると、信頼性が低下します。

$('li')
    // Add classes first, so we calculate on the right styles
    .addClass("middle")
    .addClass("button")
    .each(function() {
        // Compare with last position
        if (lastPos != $(this).position().top) {
            $(this).removeClass("middle").addClass("left")
                .prev().removeClass("middle").addClass("right");
        }
        // Store last position
        lastPos = $(this).position().top;
    });

http://jsfiddle.net/2qydM/6/

于 2012-10-25T14:31:36.820 に答える
4

あなたのコードはほとんど正しいです、それをうまくいかなかったたった2つの落とし穴：

  1. var liWidthOut = this.offsetWidth;後者のように代わりに使用するvar liWidthOut = $(this).width();と、パディングを追加する代わりに、内側のテキストの幅が得られますoffsetWidth。

  2. .buttonループと幅の計算を開始する前にクラスを適用し.buttonます。スタイルは要素の幅に影響するため、後で計算が失敗しないように、最初にクラスを適用する必要があります。

これら2つのことを修正したコードの動作デモを参照してください。

于 2012-10-25T15:07:30.977 に答える
0

Would it be possible to separate these lists into seperate lists?

If so you could use :nth-child or :last-child

于 2012-10-25T14:38:22.897 に答える