[英]Loop through ul li elements and get the li text excluding childrens
您好,我如何遍歷 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
遍歷.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() 微插件的 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解決方案使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.