1

在我的页面上可能填充了任意数量的 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>
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 对象，而不是重新创建它两次。所以添加：

var $elem = $(this);

然后无论你有什么$(this)，你都可以用$elem. 这样做的原因是每次使用时$(something)都会创建一个新的 jQuery 对象，这会产生一些开销。因为$(this)它非常小，但如果您使用复杂的选择器，开销可能会很大。

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

于 2013-01-18T15:19:28.937 回答
1

您的代码不起作用，因为您正在处理所有 uls 而不是当前的。下面是一种使用当前 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");   
});
于 2013-01-18T15:19:44.350 回答