Question

我有多个div，它们在页面上的同一个类由另一个具有相同类的div打开。每次我尝试只打开一个div时，所有div的显示都因为我正在使用一个类。我如何编写jQuery来查找要显示的div而不显示所有div？

<div class="account">
 <div class="actions">
   <div><a href="" class="more">More Info</a></div>
 </div><!-- /actions -->
 <div class="info>This info would be show for more info</div>
</div><!-- /account -->

<div class="account">
 <div class="actions">
   <div><a href="" class="more">More Info</a></div>
 </div><!-- /actions -->
 <div class="info>This info would be show for more info</div>
</div><!-- /account -->

Answer 1

试试这个：

$("div.account a.more").click(function() {
    $(this).parent().parent().parent().children("div.info").show();
    return false;
});

这将显示与“链接”相同的“帐户”div内的“info”div。

对于更灵活但效率更低的方法，您也可以这样做：

$("div.account a.more").click(function() {
    $(this).parents("div.account").first().children("div.info").show();
    return false;
});

JSFiddle演示：http://jsfiddle.net/Ma28E/

Answer 2

为每个div提供一个唯一的ID，或者为它们提供多个类，这样任何一个div上的类集都是唯一的。

Answer 3

使用以下代码

$('div.actions').find('a').click(function(e)
{
    $(this).parents('div.actions').next('.info').show();
}

Answer 4

当您的.click注册时，找到相对于.info的{{1}}元素

$(this)

<强> Code example on jsfiddle

Answer 5

我倾向于这样做：

$("a.more").click(function(){
    $(this).closest(".account").find(".info").toggle();
    return false;
});

与此处的许多其他答案不同的是closest，它找到与选择器匹配的最接近的父级。我更喜欢.parent().parent().parent()方法，因为它为将来的标记更改提供了最大的灵活性。只要其中有.account个容器.info，就可以了。

Answer 6

将其保存在新文件中：

    <html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

        <script>
            $(document).ready(function () {
                $("#bt_action1").bind("click", function() {
                    $($(".account")[0]).toggle();
                })
                $("#bt_action2").bind("click", function() {
                    $($(".account")[1]).toggle();
                })
            }) 
        </script>
    </head>
    <body>

        <div class="account">
            <div class="actions">
                <div><a href="" class="more">More Info 1</a></div>
            </div><!-- /actions -->
            <div class="info">This info would be show for more info</div>
        </div><!-- /account -->

        <div class="account">
            <div class="actions">
                <div><a href="" class="more">More Info 2</a></div>
            </div><!-- /actions -->
            <div class="info">This info would be show for more info</div>
        </div><!-- /account -->

        <form>
            <input type="button" id="bt_action1" value="Show/Hide 1" />
            <input type="button" id="bt_action2" value="Show/Hide 2" />
        </form>
    </body>
</html>

此代码的关键是从Jquery对象到DOM对象再次更改为Jquery，因此您可以在类选择器返回的集合中找到任何div：

$($(".account")[0]).toggle();

（提醒集合以索引0开头，因此第二项具有索引1，依此类推。toggle()交替显示或隐藏div。

找到一个div并显示

6 个答案: