How can I get a Node's only direct children with a specific class name?

Question

Example

<div class="list-group">
  <div class="list-group-item">
    <div class="list-group"> <!--I have this-->
      <div class="list-group-item"> <!--And I want to reach this-->
        <div class="list-group">
          <div class="list-group-item"></div> <!--Not this-->
          <div class="list-group-item"></div>
        </div>
      </div>
      <div class="list-group-item"></div> <!--And get this-->
    </div>
  </div>
</div>

I have a list-group that contains items and groups and I want to keep that hierarchy and get a list-group's only direct list-group-items.

How can I do so?

this question may have been answered in this [post](https://stackoverflow.com/q/3680876/5409815) using the `:scope` pseudo class. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:scope#direct_children) for more info. — lochiwei, Sep 11 '21 at 02:07

Mirko Vukušić · Accepted Answer · 2017-01-03T09:29:18.150

3

You haven't mentioned if you use any JS frameworks, but with JQuery it is fairly simple... just use children()

In example $("#haveThis").children()

You can also filter children like: $("#haveThis").children("list-group-item")

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

For vanilla JS I'd do this:

[].slice.call(document.getElementById("havethis").children).filter(el=>el.className==='list-group-item')

edited Jan 03 '17 at 09:29

answered Jan 03 '17 at 09:07

Mirko Vukušić

2,091
1
10
14

Edit : I know about the JQuery solution but I didn't know I could use JQuery functions on var Node like $(Node).children – Kreator Jan 03 '17 at 10:03
If you don't target IE or Opera Mini, it's pretty safe to use `Array.from` instead of `[].slice.call`. – fodma1 Mar 22 '18 at 05:35

score 0 · Answer 2 · answered Jan 03 '17 at 09:22

In vanilla JS (if you're not using jQuery) element.children (where element is the parent you wish to query) will return a list of all direct child nodes, you would then itterate over the list list, looking for node.className = "list-group-item"; I've not found a way to do this with standard CSS selectors, so a coded solution seems to be the only option.

score -3 · Answer 3 · answered Jan 03 '17 at 08:56

-3

Get all elements with the specified class name:

var x = document.getElementsByClassName("list-group-item");

Link https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

answered Jan 03 '17 at 08:56

digit

4,479
3
24
43

1

This will get all elements in the doc with that class, and as such does not answer the question. – allnodcoms Jan 03 '17 at 09:13
Yes, it's true but you can filter it out. Just put x[0] – digit Jan 03 '17 at 09:20
1

But x[0] will just get the first element, irrelvant of its position in the DOM. – allnodcoms Jan 03 '17 at 09:25

How can I get a Node's only direct children with a specific class name?

3 Answers3