Question

我有一个模态弹出窗口，它有不同的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 :(

Answer 1

你可以做到

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

或

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

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

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

$('div').toggle();＆lt; - 这将切换您网页上的每个div

Answer 2

选择适当的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();

Answer 3

试试这个

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

Answer 4

原因很简单

$('div').toggle();

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

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

代替

Answer 5

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

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

所有这三个选择器完成同样的事情.. 第一和第二选择器几乎相同。他们选择所有在ul下的div。我更喜欢第三个选择器，因为它只会选择直接的子节点，例如li，在这种情况下只隐藏它们内部的div ...

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

Answer 6

试试这个。现在，您可以传递id并仅显示所需的div

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

function showOnlyMe(myID){
    $("#panels li div").each(function () {    
        if($(this).attr('id') != myID) {
            $(this).hide();
        }
    });
}

在ul list jquery中找到每个div

6 个答案: