使用父控件的数据属性查找时跳过控件

Question

我有几个复选框，我必须找到已选中的复选框，但我需要跳过那些“未知”作为复选框的父控件（span）的数据属性的复选框。由于其他一些限制，我无法在复选框中添加数据属性。

HTML代码

<ul>
    <li class="race">
        <span Caption="Other" data-originalName="A">
        <input type="checkbox" id="Chk1" onclick="Selection();" />
        <label for="Chk1">A</label>
    </li>
    <li class="race">
        <span Caption="Other" data-originalName="B">
        <input type="checkbox" id="Chk2" onclick="Selection();"/>
        <label for="Chk2">B</label>
    </li>
    <li class="race">
        <span Caption="Other" data-originalName="C">
        <input type="checkbox" id="Chk3" onclick="Selection();"/>
        <label for="Chk3">C</label>
    </li>
    <li class="race">
        <span Caption="Other" data-originalName="D">
        <input type="checkbox" id="Chk4" onclick="Selection();"/>
        <label for="Chk4">D</label>
    </li>
    <li class="race">
        <span Caption="Other" data-originalName="Unknown">
        <input type="checkbox" id="Chk5" onclick="Selection();"/>
        <label for="Chk5">Unknown</label>
    </li>
</ul>

jQuery代码

var arrSelectedRaces=$(".race").find("input[type=checkbox]:not(:parent[data-originalName='Unknown']):checked")

我在jQuery脚本中缺少什么？

Answer 1

您可以使用.filter()。

在传递给.filter()的函数中，我们检查最接近的跨度（父级）是否具有“未知”的data-originalName属性。如果是这样，则返回true，否则返回false。

$('.race').find('input:checkbox').filter(function(){
    return $(this).closest('span').attr('data-originalName') != 'Unknown';
});

JSFiddle