Question

在我的页面上可能有任意数量的UL填充，每个最多有3个LI。我已将此条件语句设置为处理左边距，具体取决于可能有多少LI。它记录了正确的结果，但是它总是应用css，好像结果是1，即使结果是2或3 ......我对此很新，所以也许我对一个更有经验的人遗漏了一些明显的东西。每个LI的宽度和高度为40px，背景图像。文本缩进，因此不显示。

$("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>

Answer 1

你的问题在这里：

$('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);
});

查看fiddle here。

正如epascarello指出的那样，为了提高效率，你应该缓存jQuery对象，而不是重新创建它两次。所以添加：

var $elem = $(this);

然后，如果您有$(this)，则可以将其替换为$elem。这样做的原因是每次使用$(something)时都会创建一个有一些开销的新jQuery对象。对于$(this)，它非常小，但如果您使用的是复杂的选择器，则开销可能很大。

此外，正如epascarello所做的那样，您可以通过为边距创建变量然后在条件块的末尾应用它来在源代码中保存几个字节。此外，如果您决定更改选择器（可能您决定将其应用于第二个孩子而不是第一个孩子）或更改您想要操作的属性，这确实会使它更容易一些。

Answer 2

您的代码不起作用，因为您正在处理所有的uls而不是当前的uls。下面是一种使用当前URL和每个URL并且无需多次复制和粘贴同一行的方法。为什么拥有相同的精确行复制并粘贴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");   
});

条件声明不响应结果

2 个答案: