jquery - 使用 jQuery 在多个无组织列表中选择第一个 "li"

Question

问题演示在这里:http://www.studioimbrue.com

目前，当页面加载时，所有缩略图都会触发变暗。我试图使每个第一个拇指保持完全不透明(当然使用 :first )，直到单击另一个拇指。我可以让它为第一个执行此操作，但它不会迭代到每个

。我尝试使用 each() 函数，但无法让它工作。我的 JavaScript 技能不是很好，所以如果您找到解决方案，只需发布​​代码然后解释(如果可以的话)。

下面是我正在使用的当前代码:

$(document).ready(function(){
    var activeOpacity   = 1.0,
    inactiveOpacity = 0.6,
    fadeTime = 100,
    clickedClass = "selected",
    thumbs = ".thumbscontainer ul li";

    $(thumbs).fadeTo(1, inactiveOpacity);

    $(thumbs).hover(
        function(){
            $(this).fadeTo(fadeTime, activeOpacity);
        },
        function(){
            // Only fade out if the user hasn't clicked the thumb
            if(!$(this).hasClass(clickedClass)) {
                $(this).fadeTo(fadeTime, inactiveOpacity);
            }
        });
    $(thumbs).click(function() {
        // Remove selected class from any elements other than this
        var clicked, previous;
        clicked = $(this);
        if (!clicked.hasClass(clickedClass)) {
            previous = $(thumbs+'.'+clickedClass);
            previous.removeClass(clickedClass).fadeTo(fadeTime, inactiveOpacity);
            clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
        }
    });
});

Answer 1

您需要:nth-child()或:first-child :

$(".thumbscontainer li:nth-child(1)")

实际上，只需更改 $(thumbs).fadeTo(1, inactiveOpacity); 行即可改为:

$(thumbs).not(':first-child').fadeTo(1, inactiveOpacity)
         .end().filter(':first-child').addClass(clickedClass);

:first返回索引 0 的单个项目在结果集中。 :nth-child(1)返回其父项的第一个子项，即每个列表中的第一个 li。

重要提示:使用 :nth-child 时重要的是要意识到传递给选择器的数字是 1基于，而不是 0像大多数数组或选择器一样基于。 :nth-child(1)是第一个 child ，:nth-child(2)是第二个，依此类推。

谢谢尼克!