Question

我有以下div结构：

<div class="members-content">
<a>Studen ...</a>
</div>

<div class="members-content">
<a>Studen ...</a>
<input type="checkbox" class="form-checkbox" >
</div>

<div class="members-content">
<a>Studen ...</a>
<input type="checkbox" class="form-checkbox" >
</div>

如何只显示不包含复选框的div？

Answer 1

尝试：$('.members-content:not(:has(input))')

Answer 2

要显示没有复选框的那个：

$("div.members-content:not(:has(:checkbox))").show();

使用复选框隐藏那些：

$("div.members-content").has(":checkbox)").hide();

// could also hide with the following, but less effecient:
$("div.members-content:has(:checkbox)").hide();

或者，一个可以说更简单的方法就是首先将它们全部隐藏起来，然后展示你想要的那个：

$("div.members-content").hide();
$("div.members-content:not(:has(:checkbox))").show();

// OR
var members = $("div.members-content");
members.hide();
members.not(":has(:checkbox)").show();

Answer 3

$('.members-content').hide();
$('div:not(:has(input[type="checkbox"]))').show()

这将隐藏除了没有任何复选框的div之外的所有内容

工作样本：http://jsfiddle.net/4kYcx/14/

Answer 4

你走了：

$(function(){
    $("div.members-content").filter(function(){
        return $(this).find(":checkbox").length > 0;
    }).hide();
});

如何只使用jQuery显示不包含复选框的div？

4 个答案: