javascript - 缺少子元素的元素的 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

You could use .filter():

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