1

私のページには、ULがいくつでも入力されている可能性があり、それぞれに最大3つのLIがあります。LIがいくつあるかに応じて、左マージンを処理するようにこの条件ステートメントを設定しました。正しい結果をログに記録しますが、結果が2または3であっても、常に結果が1であるかのようにcssを適用します...私はこれにまったく慣れていないので、経験豊富な人には明らかな何かが欠けている可能性があります。各LIの幅と高さは40ピクセルで、背景画像があります。テキストはインデントされているため、表示されません。

$("ul.links").each(function(){    
    var num = $(this).children().length;
    if (num == 1) {
        $('ul.links li:first-child').css('margin-left','125px');
    }
    else if (num == 2) {
        $('ul.links li:first-child').css('margin-left','96px');
    }
    else {
        $('ul.links li:first-child').css('margin-left','71px');
    }
    //console.log(num);
});

<ul class="links">
  <li><a href="#">First</a></li>
  <li><a href="#">Second</a></li>
  <li><a href="#">Third</a></li>
</ul>
4

2 に答える 2

2

あなたの問題はここにあります：

$('ul.links li:first-child').css('margin-left','71px');

すべての ul.links を再度選択し、それらすべて (または最初の子) にマージンを適用しています。を使用して繰り返し処理しているものだけに適用する必要がありますthis。

これを試してください（しゃれは意図していません）：

$("ul.links").each(function(){    
    var num = $(this).children().length;
    if (num == 1) {
        $(this).children().first().css('margin-left','125px');
    }
    else if (num == 2) {
        $(this).children().first().css('margin-left','96px');
    }
    else {
        $(this).children().first().css('margin-left','71px');
    }
    console.log(num);
});

ここでフィドルを参照してください。

epascarello が指摘したように、効率のために、jQuery オブジェクトを 2 回再作成するのではなく、キャッシュする必要があります。したがって、次を追加します。

var $elem = $(this);

そして、どこにいても$(this)、それを に置き換えることができます$elem。これを行う理由は、使用するたび$(something)に、オーバーヘッドのある新しい jQuery オブジェクトを作成しているためです。非常に小さいため$(this)、複雑なセレクターを使用している場合、オーバーヘッドが大きくなる可能性があります。

また、epascarello が行ったように、マージン用の変数を作成し、それを条件ブロックの最後に適用することで、ソース コードを数バイト節約できます。さらに、これにより、たとえば、セレクターを変更する場合 (最初の子ではなく 2 番目の子に適用する場合) や、いじりたいプロパティを変更する場合に少し簡単になります。

于 2013-01-18T15:19:28.937 に答える
1

現在のULではなくすべてのULを処理しているため、コードは機能しません。以下は、現在の URL とそれぞれを使用して作業し、同じ行を複数回コピーして貼り付けることなく実行する 1 つの方法です。正確に同じ行を 3 回コピーして貼り付けた理由は、将来、それを変更する必要があり、1 箇所ではなく 3 箇所で更新する必要があることを意味します。

$("ul.links").each(function(){
    var currentUL = $(this),
        num = currentUL.children().length,
        margin;  //use a variable instead of pasting the same jq line over and over
    switch(num){  //switch is cleaner
        case 1 : 
            margin=125;
            break;
        case 2 : 
            margin=96;
            break;
        default : 
            margin=71;
            break;
    }
    currentUL  //Work off the current ul
        .find(">li:first-child")  //select the first li
            .css("margin-left",margin + "px");   
});
于 2013-01-18T15:19:44.350 に答える