javascript - jquery selector for an element MISSING a child element - Stack Overflow

admin管理员组

文章数量:1425662

I am needing help forming a jquery selector to return elements which are missing a particular child element.

Given the following HTML fragment:

    <div id="rack1" class="rack">
    <span id="rackunit1" class="rackspace">
        <span id="ponent1">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="ponent2">BoxA</span>
        <span id="label3">Space C</span>
    </span>
</div>
<div id="rack2" class="rack">
    <span id="rackunit4" class="rackspace">
        <span id="ponent3">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="ponent4">BoxD</span>
        <span id="label6">Space F</span>
    </span>
</div>

Find for me the rackunit spans with NO ponent span. Thus far I have: $(".rack .rackspace") to get me all of the rackunit spans, not sure how to either exclude those with a ponent span or select only those without one...

I am needing help forming a jquery selector to return elements which are missing a particular child element.

Given the following HTML fragment:

    <div id="rack1" class="rack">
    <span id="rackunit1" class="rackspace">
        <span id="ponent1">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="ponent2">BoxA</span>
        <span id="label3">Space C</span>
    </span>
</div>
<div id="rack2" class="rack">
    <span id="rackunit4" class="rackspace">
        <span id="ponent3">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="ponent4">BoxD</span>
        <span id="label6">Space F</span>
    </span>
</div>

Find for me the rackunit spans with NO ponent span. Thus far I have: $(".rack .rackspace") to get me all of the rackunit spans, not sure how to either exclude those with a ponent span or select only those without one...

• javascript
• jquery

Share Improve this question Follow asked Jan 23, 2013 at 15:02 Cos CallisCos Callis 5,08433 gold badges3232 silver badges5757 bronze badges 1

• 1 a bination of :not and :has should do it. – Kevin B Commented Jan 23, 2013 at 15:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

I guess the following should work:

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

DEMO: http://jsfiddle/WbCzj/

You could use .filter():

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

本文标签： javascriptjquery selector for an element MISSING a child elementStack Overflow