Select list item with jQuery without targeting sub list items

Question

I'm attempting to target specific top level list items with jQuery. However some of these list items also include nested lists of their own,which I want to ignore.

I found a stackoverflow question here Target first level <li>s and not the nested <li>s about this very topic but after enacting the solutions I'm still encountering the same issue.

HTML:

<div>
  <ul>
    <li data-level="1">
      Upper List Item
      <ul>
        <li>Sub list item</li>
      </ul>
    </li>
    <li data-level="1">List item 2</li>
  </ul>
</div>

Javascript:

$(document).ready(function() {
    $("div > ul > li[data-level=1]").each(function(index){
    console.log(index + ":" + $(this).text());
  });
});

https://jsfiddle.net/o4mw0gd8/3/

Aramil Rey · Accepted Answer · 2015-12-22T14:23:16.887

The problem is that you are grabbing all text from inside the top level <li>'s.

Considering that sub-level <li>'s are inside of a top-level <li>, then the text of those is inside the top level <li>'s too...

Solution 1:

You should put your text inside a <span> tag and it would be much easier to find the text inside those <span>/s inside top-level <li>'s!

Solution 2:

Before grabbing the text of your <li>'s delete all <ul> elements inside it, so you would get only the text of the top level <li>'s

JS:

$("ul > li[data-level=1]").each(function(index) {
    var current = $(this).clone();
    current.find('ul').remove();
    console.log(index + ":" + current.text().trim() );
});

Working Fiddle

I don't have access to the actual content that's being produced (partially why I'm using jQuery in the first place to grab the list) which is why I can't really use solution 1. But solution 2 worked great! — Matt, Dec 22 '15 at 14:42

score 1 · Answer 2 · answered Dec 22 '15 at 14:11

1

Some tricks.

$("div > ul > li[data-level=1]").each(function(index){
    console.log(this.childNodes.item(0).textContent);
});

answered Dec 22 '15 at 14:11

user5698801

576
4
10

1

It's a good solution if there is only one node of text. But it might not work if the html structure is more complex – Aramil Rey Dec 22 '15 at 14:16
True, but that could be easily solved with .innerHTML (in case a complex structure needed) – Nikita Kurtin Dec 22 '15 at 14:18

Alex Char · Answer 3 · 2015-12-22T14:58:24.563

You can exclude child ul elements from selection using jquery .not():

$(document).ready(function() {
  $("ul > li[data-level=1]").each(function(index) {
     $(this).not("ul").css("color", "red");
  });
});

ul li {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-level="1">
    Upper List Item
    <ul>
      <li>Sub list item</li>
    </ul>
  </li>
  <li data-level="1">List item 2</li>
</ul>

Nikita Kurtin · Answer 4 · 2015-12-22T16:46:03.003

As Aramil says - you taking the whole inner content, which include the nested ul>li:

 "Upper List Item
  <ul>
    <li>Sub list item</li>
  </ul>"

Bu you can solve it with substring like this:

 $(function(){
  $("li[data-level=1]").each(function(){
     var txt=this.innerHTML;//the whole text including the nested ul>li
      if(txt.indexOf("<")>-1)txt=txt.substring(txt.indexOf("<"),0);//cut from first tag if needed
     console.info(txt);//needed txt
   });
});

Select list item with jQuery without targeting sub list items

4 Answers4

Solution 1:

Solution 2: