Question

对于动态网站，我尝试创建一个项目列表，其中最后li（如果是奇数）是100％宽。

我得到了这个工作，我遇到的问题是下一个UL也是这样，而最后一个li并不是奇数。

基本上：如果列表中的最后LI为奇数，则为100％。

我很难解释自己，所以希望我的小提琴更有意义：

var target = $( "ul.odd-list > li:last-child");
if ( target.is(":nth-child(odd)"  ) ) { 
    target.css( "width", "98%");
}

demo

提前致谢！

ps，我知道我可以从第二个ul中删除该类。但是，如果决定添加更多li，那就必须存在。

Answer 1

您需要单独测试每个，因为如果任何一个匹配元素符合条件，is将返回true：

JSFIddle：http://jsfiddle.net/TrueBlueAussie/Ln5uf9y1/5/

var target = $("ul.odd-list > li:last-child");
target.each(function () {
    if ($(this).is(":nth-child(odd)")) {
        $(this).css("width", "98%");
    }
});

您可以将其缩减为单个选择器：

$("ul.odd-list > li:last-child:nth-child(odd)").css("width", "98%");

JSFiddle：http://jsfiddle.net/TrueBlueAussie/Ln5uf9y1/7/

Answer 2

你的默认宽度看起来是48％的宽度。让它像它一样，并在需要的地方应用98％的宽度。

在css中：

li {
   width : 48%;
 }
li:last-child:nth-child(odd) {
   width: 98%;
}

如果你真的想用jquery来设置最后的宽度：

$('ul.odd-list > li:last-child:nth-child(odd)').css('width', '98%')

注意：TrueBlueAussie的回答也是正确的，但我不喜欢在不需要它的情况下使用'if'。

选择ul与奇数li

2 个答案: