3

我有一个模态弹出窗口，其中有不同的 div 用于不同的消息，现在我想隐藏每个 div 并只显示我需要显示的那个。而不是写出每个 div id 并将其设置为隐藏我想做一个循环，所以我把我的 div 放在一个 UL 列表中。但我似乎无法弄清楚如何仅隐藏该 UL 列表中的 div ..

$("#panels li").each(function (i) {
        $('div').toggle();
    });

<ul id="panels">
        <li><div id="dvError" class="hiddencol">this is div 1</div></li>
        <li><div id="dvconfirm" class="hiddencol">this is div 2</div></li>
</ul>

出于某种原因，当我这样做时它会隐藏它们，但它会隐藏我页面上的每个 div :(

4

6 回答 6

7

你可以做

$("#panels").find('div').toggle();

或者

$("#panels div").toggle();

或者如果你想保持你的循环

$("#panels li").each(function (i) {
    $(this).find('div').toggle();
});

$('div').toggle();<-- 这将切换页面上的每个 div

于 2012-09-05T15:02:14.480 回答
0

如果你想隐藏 ul 列表中的所有 div，那么这只是选择器的问题。您不需要编写循环来选择元素。因为在 jQUery 中，当您编写选择器时，所有满足条件的元素都会被迭代和选择。

   $('ul#panels div').hide();
    $('ul div').hide();
    $('ul > li div').hide();

所有这三个选择器完成相同的事情。第一个和第二个选择器几乎相同。他们选择 ul 下的所有 div。我更喜欢第三个选择器，因为它只会选择直接的孩子，即在这种情况下是 li 并且只将 div 隐藏在其中......

还要检查这个小提琴http://jsfiddle.net/sushanth009/P3xe6/1/

于 2012-09-05T15:24:03.823 回答
0

选择合适的 div 并对其进行操作：

$("#panels li div").each(function (i) {
   // Do some other things on them here... with this context for the current div
   $(this).toggle();
});

编辑：

一样

$("#panels li div").toggle();
于 2012-09-05T15:02:29.937 回答
0

尝试这个

$("#panels li").each(function (i) {
    $(this).find('div').toggle();
});
于 2012-09-05T15:03:28.050 回答
0

原因很简单

$('div').toggle();

与您的第一个选择无关，它只是查找页面上的每个div。尝试

$('#panels * div').toggle();

反而

于 2012-09-05T15:03:34.310 回答
0

尝试这个。现在您可以通过id并仅显示所需的div

$(document).ready(function(){    
    showOnlyMe('dvError');
});

function showOnlyMe(myID){
    $("#panels li div").each(function () {    
        if($(this).attr('id') != myID) {
            $(this).hide();
        }
    });
}
于 2012-09-05T15:52:37.253 回答