循环遍历 ul li 元素并获取不包括 childrens 的 li 文本

Question

你好，我怎样才能遍历 ul li 元素并只从 li 中获取文本内容，除了它的子元素的文本内容？

<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>

我只想获得 @paul 没有离线, 我试过这个：

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

但我得到 @pauloffline

Answer 1

遍历 .childNodes，按节点类型 3（文本节点）过滤，以仅获取作为文本节点子节点的节点：

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>

Answer 2

这是一个使用 .ignore() micro plugin

的 jQuery 变体

$.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>

Answer 3

Jquery 使用 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>

循环遍历 ul li 元素并获取不包括 childrens 的 li 文本

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

html

javascript

jquery

loops

html-lists