javascript - 条件语句不响应结果

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 所做的那样，您可以通过为边距创建一个变量然后在条件 block 的末尾应用它来在源代码中节省几个字节。此外，如果您决定更改选择器(也许您决定将其应用于第二个 child 而不是第一个)或更改您想要摆弄的属性，这确实会让事情变得更容易一些。