jQuery - 计算父元素内具有某个类的元素

Question

我得到了这个 HTML 结构：

<form>
    <input class="myTrigger" type="radio" value="1"/>
    <input class="myTrigger" type="radio" value="2"/>
    <fieldset>
        <ul class="class1">
            <li></li>
        </ul>
        <ul class="class2">
            <li></li>
        </ul>
    </fieldset>
    <fieldset>
        <ul class="class2">
            <li></li>
        </ul>
        <ul class="class2">
            <li></li>
        </ul>
    </fieldset>
</form>

使用 jQuery，我需要遍历每个 ul 并隐藏那些没有类的 myClass （由 checked radio .myTrigger 定义） 然后我需要检查现在为空的fieldset 的（即：fieldsets，其中没有 ul 有 myClass 类）并完全隐藏它们。

到目前为止，我能够隐藏所需的 ul，但不能隐藏 fieldsets。这是我得到的：

function myFunction() {

        var myClass = "class"+($("radio:checked").attr("value"));
        var productGroup = $("form ul");

        $("form fieldset").each(function(index){

            groupCheck = 0;

            $.each(productGroup, function(index, obj){
                if($(obj).hasClass(myClass))
                    {
                        groupCheck += 1;
                        $(obj).show();
                    }
                else
                    {
                        $(obj).hide();
                    };
            })

            if (groupCheck == 0)
                {
                    $(this).hide();
                }
            else {
                    $(this).show();
                };

        });

    };
myFunction();
$(".myTrigger").change(myFunction);

我还在同一页面上获得了切换相同 ul 的其他脚本 ex:(legend).click(function(){$(this).siblings("ul").toggle();}); 所以无法隐藏基于ul 的字段集已经隐藏。相反，我需要寻找存在与否的类（“myClass”）。

（即：虽然小脚本只是为了方便用户而对 ul 进行转换，但“myFunction”需要根据“myTrigger”选择过滤 ul 和要显示的字段集。）

Answer 1

不需要循环；只需使用适当的选择器定位您想要显示/隐藏的内容：

var myClass = 'class' + $('radio:checked:first').attr('value');

// Hide all the <ul>s
$('ul.' + myClass).hide();

// First, show all the fieldsets, in case any were hidden earlier
$('fieldset').show(); 

// Now hide the ones that don't have any visible <ul>s inside
$('fieldset:not(:has(ul:visible))').hide();