JQuery - How can I select all children that contain a certain attribute but exclude all deeper descendants?

Question

Select all "children" that contain a certain attribute ("attribute_nm") but exclude all children of the children (and so on) that contain the same attribute.

The "real" case:

How to adjust this query...

$("#main_span").find("[attribute_nm]");

... to select only the items appointed below...

<span id="main_span">

    <span attribute_nm> <!-- Select that PARENT and its contents! -->

        <!-- MORE HTML... -->

        <span attribute_nm> <!-- DO NOT select that CHILD and its contents! -->
        </span>

        <!-- MORE HTML... -->

        <span attribute_nm> <!-- Do not select that child and its contents! -->
        </span>

        <!-- MORE HTML... -->

        <span attribute_nm> <!-- Do not select that child and its contents! -->
        </span>

        <!-- MORE HTML... -->

    </span>

    <span attribute_nm> <!-- Select that PARENT and its contents! -->

        <!-- MORE HTML... -->

        <span attribute_nm> <!-- DO NOT select that CHILD and its contents! -->
        </span>

        <!-- MORE HTML... -->

        <span attribute_nm> <!-- Do not select that child and its contents! -->
        </span>

        <!-- MORE HTML... -->

        <span attribute_nm> <!-- Do not select that child and its contents! -->
        </span>

        <!-- MORE HTML... -->

    </span>

    <!-- MORE HTML... -->

</span>

score 2 · Accepted Answer · answered Oct 14 '19 at 19:14

2

$("#main_span").children("[attribute_nm]");

https://api.jquery.com/children/

answered Oct 14 '19 at 19:14

isherwood

58,414
16
114
157

TIP: You can use this approach `$("#main_span").find("[attribute_nm]:eq(0)").parent().children("[attribute_nm]");` if the "spans" that you want to select are MORE THAN ONE LEVEL below the "span" containing `id="main_span"`. – Eduardo Lucio Oct 15 '19 at 21:49

score 1 · Answer 2 · answered Oct 14 '19 at 19:14

You can use > to specify direct child.

var elems = $("#main_span").find("> [attribute_nm]")
console.log(elems.length)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="main_span">

    <span attribute_nm> <!-- Select that PARENT and its contents! -->

        <!-- MORE HTML... -->

        <span attribute_nm> <!-- DO NOT select that CHILD and its contents! -->
        </span>

        <!-- MORE HTML... -->

        <span attribute_nm> <!-- Do not select that child and its contents! -->
        </span>

        <!-- MORE HTML... -->

        <span attribute_nm> <!-- Do not select that child and its contents! -->
        </span>

        <!-- MORE HTML... -->

    </span>

    <span attribute_nm> <!-- Select that PARENT and its contents! -->

        <!-- MORE HTML... -->

        <span attribute_nm> <!-- DO NOT select that CHILD and its contents! -->
        </span>

        <!-- MORE HTML... -->

        <span attribute_nm> <!-- Do not select that child and its contents! -->
        </span>

        <!-- MORE HTML... -->

        <span attribute_nm> <!-- Do not select that child and its contents! -->
        </span>

        <!-- MORE HTML... -->

    </span>

    <!-- MORE HTML... -->

</span>

We need to stop using the term "direct child". It just confuses matters. There's only one kind of child. Anything else is a descendant of another type. — isherwood, Oct 14 '19 at 19:16

JQuery - How can I select all children that contain a certain attribute but exclude all deeper descendants?

2 Answers2