jQuery子元素选择

时间:2014-07-20 10:04:37

标签: jquery

可能有相似的帖子,但我无法理解其中的大量内容。我的问题是我有

       <aside class="main-aside-info">
            <ul id="main-aside-info-ul">
                <img id="triangle" src="images/triangle.png" /><li>Title</li>
                <img id="triangle" src="images/triangle.png" /><li>Title</li>
                <img id="triangle" src="images/triangle.png" /><li>Title</li>
                <img id="triangle" src="images/triangle.png" /><li>Title</li>
                <img id="triangle" src="images/triangle.png" /><li>Title</li>
                <img id="triangle" src="images/triangle.png" /><li>Title</li>
                <img id="triangle" src="images/triangle.png" /><li>Title</li>
                <img id="triangle" src="images/triangle.png" /><li>Title</li>
            </ul>
        </aside>

这个img中的每一个都隐藏了可见性,我想对它做一个好看的功能,这样我可能不得不使用子类选择器或类似的东西。我尝试使用如下的愚蠢代码来完成它:

$( document ).ready(function() {
    $("#one").click(function(){
    $("#triangle1").css('visibility', 'visible');

});
    $("#two").click(function(){
    $("#triangle2").css('visibility', 'visible');
});
            $("#two").click(function(){
    $("#triangle2").css('visibility', 'visible');
});
                    $("#two").click(function(){
    $("#triangle2").css('visibility', 'visible');
});
                            $("#two").click(function(){
    $("#triangle2").css('visibility', 'visible');
});
                                    $("#two").click(function(){
    $("#triangle2").css('visibility', 'visible');
});

});

等等。但是我想这个代码并不是最优的(即使在这里,我尝试给出不同的id&#39; s)。你能帮我解决一下我的职能吗?

1 个答案:

答案 0 :(得分:3)

首先,我们必须使HTML有效。两个主要问题:

  1. id必须是唯一的

  2. 您无法将img元素直接放在ul内; ulol的唯一有效子项为litemplate

  3. 因此,我们将img元素放在<{em}里面,然后使用li而不是class

    id

    然后您可以使用<aside class="main-aside-info"> <ul id="main-aside-info-ul"> <li><img class="triangle" src="images/triangle.png" />Title</li> <li><img class="triangle" src="images/triangle.png" />Title</li> <li><img class="triangle" src="images/triangle.png" />Title</li> <li><img class="triangle" src="images/triangle.png" />Title</li> <li><img class="triangle" src="images/triangle.png" />Title</li> <li><img class="triangle" src="images/triangle.png" />Title</li> <li><img class="triangle" src="images/triangle.png" />Title</li> <li><img class="triangle" src="images/triangle.png" />Title</li> </ul> </aside> 伪选择器选择它们:

    :eq

    $("aside .triangle:eq(2)"); // Finds the third 函数:

    .eq

    或者实际上,如果您关闭父母的$("aside .triangle").eq(2); // Finds the third ,您甚至不需要课程:

    id

    然后:

    <aside class="main-aside-info">
        <ul id="main-aside-info-ul">
            <li><img src="images/triangle.png" />Title</li>
            <li><img src="images/triangle.png" />Title</li>
            <li><img src="images/triangle.png" />Title</li>
            <li><img src="images/triangle.png" />Title</li>
            <li><img src="images/triangle.png" />Title</li>
            <li><img src="images/triangle.png" />Title</li>
            <li><img src="images/triangle.png" />Title</li>
            <li><img src="images/triangle.png" />Title</li>
        </ul>
    </aside>
    

    $("#main-aside-info-ul img:eq(2)"); // Finds the third 函数:

    .eq