问题描述
您好,如何遍历 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 而没有 offline, 我试过这个:
var lnx = $('.cht(ul class) .lom');
for (let i = 0; i < lnx.length; i++) {
var txt = lnx[i].textContent;
console.log(txt + '\n');
}
但是我得到了 @pauloffline
解决方法
遍历 .childNodes
,按 nodeType 为 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>
这是一个使用 .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>
使用替换的Jquery解决方案
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>