Question

我有以下代码：http://jsfiddle.net/p9s0pdao/

$("#filters :checkbox").change(function() {
    $(".listing-details > div").hide();
    $("#filters :checkbox:checked").each(function() {
        $(".listing-details ." + $(this).val()).show();
    });
});

我不需要隐藏.listing-details css类，而是隐藏以.wpbdp-listing开头的div

我该如何解决这个问题？

感谢。

Answer 1

让事物分离和清洁更好：我的意思是我们可以拥有一个能够完成所有事情的功能，因此我们可以随时调用它。我的意思是在DOM加载后调用它，然后在复选框更改时调用它。

ToggleThings();

$("#filters :checkbox").change(function() {
    ToggleThings();
});

function ToggleThings()
{
    $(".wpbdp-listing").hide();
    $("#filters :checkbox:checked").each(function() {
        $('.' + $(this).val()).closest('.wpbdp-listing').show();
    });
}

http://jsfiddle.net/p9s0pdao/1/

更新（最终解决方案）：

ToggleThings();

$("#filters :checkbox").change(function() {
    ToggleThings();
});

function ToggleThings()
{
    var checkedboxes = $("#filters :checkbox:checked");

    if (checkedboxes.length > 0)
    {
        $(".wpbdp-listing:visible").hide();

        checkedboxes.each(function() {
            $('.' + $(this).val()).closest('.wpbdp-listing').show();
        });
    }
    else
    {
        $(".wpbdp-listing").show();
    }
}

http://jsfiddle.net/p9s0pdao/4/

Answer 2

要获取父节点，无论它有多深，请使用.closest（）jquery方法

$(".listing-details > div").closest('.wpbdp-listing').hide()

查看文档http://api.jquery.com/closest/

Answer 3

尝试使用此代码，在JsFiddle

进行测试

$(".wpbdp-listing").hide()
$("#filters :checkbox").change(function() {
        $(".listing-details ." + $(this).val()).parents('.wpbdp-listing').hide();
    $("#filters :checkbox:checked").each(function() {
        $(".listing-details ." + $(this).val()).parents('.wpbdp-listing').show();
    });
});

我添加了“$（”。wpbdp-listing“）。hide（）”只是为了启动它以便隐藏div，因为首先取消选中复选框。您也可以这样做，以便首先检查复选框，然后删除该行。

Answer 4

您可以使用.parent()在JQuery中获取元素的父元素。

$(".listing-details").parent().hide();

jQuery隐藏父div基于复选框

4 个答案: