Question

此函数按类显示/隐藏子元素，但它当前需要单独指定每个父元素。如何修改它以便触发相关的子孙，孙子等，而不必指定每个id，我想包括？

我在这里发布了一个工作示例的小提琴：http://jsfiddle.net/chayacooper/YvMwL/

$(document).ready(function() {
$('#filterOptions li a').click(function() {
    var ourClass = $(this).attr('class');
    $('#filterOptions li').removeClass('active');
    $(this).parent().addClass('active');        

    if(ourClass == 'all') {
        $('#content').children('div.item').show();
        $('#list').children('li.item').show();  
    }
    else {          
        $('#content').children('div:not(.' + ourClass + ')').hide();
        $('#list').children(':not(li.' + ourClass + ')').hide();
        $('#content').children('div.' + ourClass).show();
        $('#list').children('li.' + ourClass).show();
    }
    return false;
});
});

Answer 1

所以，这里有两个问题。首先，您要选择的项目具有不同的标记名称，其次它们处于不同的级别（div是子项，li是孙子项。很高兴你已经有办法引用所有这些项目：.item类。

因此，如果我们将find方法与这种新的选择器方法一起使用，那么我们可以修改你的jsFiddle：

    if (ourClass == 'all')
    {
        // show all our items
        $('#content').find('.item').show();
    }
    else
    {
        // hide all elements that don't share ourClass
        $('#content').find('.item:not(.' + ourClass + ')').hide();

        // show all elements that do share ourClass
        $('#content').find('.item.' + ourClass).show();
    }

我的叉子在这里：http://jsfiddle.net/chayacooper/WZpMh/4/

有没有办法引用嵌套在div中的所有父母/孩子？

1 个答案: