缺少子元素的元素的jquery选择器

Question

我需要帮助形成一个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")来获得所有的机架单元跨度，不确定如何排除那些有组件跨度的机架单元跨度，或者只选择那些没有组件跨度的机架单元跨度...

Answer 1

我想下面的方法应该是可行的：

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

演示： http://jsfiddle.net/WbCzj/

Answer 2

您可以使用.filter()

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