元素的jquery选择器MISSING子元素

时间:2013-01-23 15:02:50

标签: javascript jquery

我需要帮助形成一个jquery选择器来返回缺少特定子元素的元素。

给出以下HTML片段:

    <div id="rack1" class="rack">
    <span id="rackunit1" class="rackspace">
        <span id="component1">BoxA</span>
        <span id="label1">Space A</span>
    </span>
    <span id="rackunit2" class="rackspace">
        <span id="label2">Space B</span>
    </span>
    <span id="rackunit3" class="rackspace">
        <span id="component2">BoxA</span>
        <span id="label3">Space C</span>
    </span>
</div>
<div id="rack2" class="rack">
    <span id="rackunit4" class="rackspace">
        <span id="component3">BoxC</span>
        <span id="label4">Space D</span>
    </span>
    <span id="rackunit5" class="rackspace">
        <span id="label5">Space E</span>
    </span>
    <span id="rackunit6" class="rackspace">
        <span id="component4">BoxD</span>
        <span id="label6">Space F</span>
    </span>
</div>

找到机架单元跨度,没有任何组件跨度。 到目前为止,我有: $(“。rack .rackspace”)为我提供所有机架单元跨度,不确定如何排除那些具有组件跨度的那些或仅选择那些没有单独的那些......

2 个答案:

答案 0 :(得分:8)

我想以下内容应该有效:

$(".rack .rackspace:not(:has(span[id^=component]))"). ...

DEMO: http://jsfiddle.net/WbCzj/

答案 1 :(得分:3)

您可以使用.filter()

$('.rack .rackspace').filter(function() {
    return $(this).find('span[id^="component"]').length === 0;
});