jQuery find first level elements with a class but not nested elements inside

Question

This is the example HTML (ids will not be present, added here for demo purpose)

Find first level nodes within the root using a function:

function findNextLevelNodes($elem) {
    // example code
    let selector = '[selector to include next nodes, but not nodes nested within those]';
    $elem.find(selector).each((i, node) => console.log($(node).attr('id')));
}

such that

let $root = $('#root');
findNextLevelNodes($root);
// should print n0, n1, n2, n3, n4, n5, n6, n7, n8
// should not print n4_1, n4_2, n8_1, n8_2

Seems simple enough but I can't find the selector that will get me this result.

Found similar questions, but was not satisfied with answers, surely this should be easy enough to do, without manually looping through all of the children

Similar questions -

jQuery find only not nested elements

this has a solution that relies on looping through all elements inside #root
node can be nested to any level, so I would prefer if I didn't have to recursively loop through each and every element inside #root

Selecting first instance of class but not nested instances via jQuery

answers depend on the classes/tags of non-node elements of html, so not applicable

EDIT

findNextLevelNodes needs to be efficient in my case since it would be called recursively for each child node, and if findNextLevelNodes itself has recursion through all children, or .parents call, I have a feeling it might not be efficient with large node trees

For now it seems, i'll have to alter the html classes to keep things efficient, kinda like

// now this should work
function findNextLevelNodes($root, level) {
    return $root.find('.node.l' + level);
}

Seems a bit hacky, I'll wait for sometime to see if I find anything more elegant and decently efficient, otherwise will have to go with this.

user_2932476 · Answer

you can reach that simply by using a recursive function that will search in direct node child using .children(), if it have a class "node" then go to next direct child otherwise go deep again Here is the function

function findNextLevelNodesByClass($elem, className) {

  let nodesArray = [];
  
  function getRecursiveNextDom($rootNode) {
    $rootNode.children().each((i, elemnt) => {
      if ($(elemnt).hasClass(className))
        nodesArray.push(elemnt)
      else
        getRecursiveNextDom($(elemnt));
    })
  }
  
  
  getRecursiveNextDom($elem,className);
  
  return nodesArray;
}

See working snippet :

function findNextLevelNodesByClass($elem, className) {

  let nodesArray = [];
  
  function getRecursiveNextDom($rootNode) {
    $rootNode.children().each((i, elemnt) => {
      if ($(elemnt).hasClass(className))
        nodesArray.push(elemnt)
      else
        getRecursiveNextDom($(elemnt));
    })
  }
  
  
  getRecursiveNextDom($elem,className);
  
  return nodesArray;
}


let $root = $('#root');
let result = findNextLevelNodesByClass($root, 'node');
//result.forEach( element => console.log(element.id))
console.log( result.map(function(y){return y.id}).join(','))

user_7380779 · Answer

i dont see others solutions than: from all .node, i am filtering .node that have only 1 parent .node (root at least)

$('#root .node').filter( (s,e) => $(e).parents(".node").length < 2); // or length == 1

i have written < 2 because root has a class node, else set < 1.

you could write too:

$('#root').find(".node").filter( (s,e) => $(e).parents(".node").length < 2);

or

$('.node').filter( (s,e) => $(e).parents(".node").length == 1);

if you add class indicating level,

$("#root .node.l1") will give you the result..and will be the more efficient

jQuery find first level elements with a class but not nested elements inside

2 Answers