Loop through ul li elements and get the li text excluding childrens

Question

Hello how can i loop through ul li elements and get the text content only from the li, excepting the text content of its children?

<li class="lom">@paul<div class="on-off">offline</div></li>
<li class="lom">@alex<div class="on-off">offline</div></li>
<li class="lom">@jhon<div class="on-off">offline</div></li>

I want to get only the @paul without offline, I have tried this:

var lnx = $('.cht(ul class) .lom');
for (let i = 0; i < lnx.length; i++) {
    var txt = lnx[i].textContent;
    console.log(txt + '\n');
}

But i get @pauloffline

If you control the structure of the html, wrapping the first text node in a `` would make it simpler to target it's textContent. Or put that value in a `data-` attribute also — charlietfl, Apr 28 '21 at 00:28
`@pauloffline`? Never pollute names with logic data. An object like `{name: "@paul", status: "offline"}` is a much better data. — Roko C. Buljan, Apr 28 '21 at 00:36
Possible duplicate of: https://stackoverflow.com/a/11348383/383904 which can be used like: `$(iteratingLIElement).ignore(".on-off").text(); // @paul` — Roko C. Buljan, Apr 28 '21 at 00:40

score 1 · Answer 1 · answered Apr 28 '21 at 00:16

1

Iterate through the .childNodes, filtering by nodeType of 3 (text node), to get only nodes that are text node children:

const texts = [...document.querySelector('.lom').childNodes]
  .filter(node => node.nodeType === 3)
  .map(node => node.textContent)
  .join('');
console.log(texts);

<ul>
<li class="lom">@paul<div class="on-off">offline</div></li>
</ul>

answered Apr 28 '21 at 00:16

CertainPerformance

356,069
52
309
320

but how can i loop through more li? I want to compare every single one with a word – Paul Taran Apr 28 '21 at 00:21
The same operation will work on any `
`, just substitute the LI you're iterating over in the place of `document.querySelector('.lom')`

CertainPerformance

Apr 28 '21 at 00:22

but document.querySelectorAll.childNodes is not iterable – Paul Taran Apr 28 '21 at 00:27

`querySelectorAll` is a *function*, you must call it. Then, with each `

` you're iterating over, use the code in my answer, substituting the `

` you want to iterate over. `.childNodes` is not a property of the `querySelectorAll` function

– CertainPerformance Apr 28 '21 at 00:34

score 0 · Answer 2 · answered Apr 28 '21 at 00:47

Here's a jQuery variant that uses the .ignore() micro plugin

$.fn.ignore = function(sel) {
  return this.clone().find(sel||">*").remove().end();
};

// Get LI element by text
const $userLI = (text) =>
  $(".lom").filter((i, el) => $(el).ignore().text().trim() === text);

// Use like
$userLI("@paul").css({color: "gold"});

<ul>
  <li class="lom">@paul <span class="on-off">offline</span></li>
  <li class="lom">@alex <span class="on-off">offline</span></li>
  <li class="lom">@jhon <span class="on-off">offline</span></li>
  <li class="lom">@paul</li>
</ul>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

SKJ · Accepted Answer · 2021-04-28T01:01:46.790

Jquery solution using replace

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace

$('.lom').each(function(index, value) {
  var getContent = $(this).text();
  var replaceTxt = getContent.replace('<div class="on-off">offline</div>','').replace('offline','');
  //$(this).find('.on-off').remove();
  
  if (replaceTxt == '@paul') {
    console.log(replaceTxt);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="lom">@paul<div class="on-off">offline</div></li>
<li class="lom">@alex<div class="on-off">offline</div></li>
<li class="lom">@jhon<div class="on-off">offline</div></li>

Loop through ul li elements and get the li text excluding childrens

3 Answers3