通过内部跨度的内部文本查找li元素

Question

我有如下的HTML

<ul id="tabStripSecondaryElements" class="k-tabstrip-items k-reset" data-role="tabstrip" style="margin-left: 37px; margin-right: 40px;" role="tablist" aria-activedescendant="tab_0">
   <li class="k-item tabClick k-state-default k-first" id="tab_1" value="1" role="tab" aria-controls="tabStripSecondaryElements-1"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Automobile&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_3" value="3" role="tab" aria-controls="tabStripSecondaryElements-2"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Router&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_4" value="4" role="tab" aria-controls="tabStripSecondaryElements-3"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Smart City Sensor&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_5" value="5" role="tab" aria-controls="tabStripSecondaryElements-4"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> ZigBee Power Cable&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_6" value="6" role="tab" aria-controls="tabStripSecondaryElements-5"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Tracker&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_7" value="7" role="tab" aria-controls="tabStripSecondaryElements-6"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Fleet Intelligence&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_8" value="8" role="tab" aria-controls="tabStripSecondaryElements-7"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Mobile&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_9" value="9" role="tab" aria-controls="tabStripSecondaryElements-8"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Double Door&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>
   <li class="k-item tabClick k-state-default" id="tab_87" value="87" role="tab" aria-controls="tabStripSecondaryElements-10"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Test&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li>

</ul>

我试图通过内部span元素的内部文本找到li元素。

例如：路由器具有li元素ID-tab_1

我尝试使用以下jquery代码，但无法正常工作并返回空

$('li.k-item tabClick k-state-default span.k-link:contains("Router")');

还有其他方法可以做到这一点吗？

Answer 1

问题出在您的选择器上。 在k-item tabClick k-state-default类之间有空格，应在其中将它们与class选择器前缀的句点分隔符连接在一起。 然后将选择span 。 要从中获取li ，您可以使用closest() ：

 var $span = $('li.k-item.tabClick.k-state-default span.k-link:contains("Router")'); var $li = $span.closest('li'); $li.css('color', '#C00'); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="tabStripSecondaryElements" class="k-tabstrip-items k-reset" data-role="tabstrip" style="margin-left: 37px; margin-right: 40px;" role="tablist" aria-activedescendant="tab_0"> <li class="k-item tabClick k-state-default k-first" id="tab_1" value="1" role="tab" aria-controls="tabStripSecondaryElements-1"> <span class="k-loading k-complete"></span> <span unselectable="on" class="k-link"> Automobile&nbsp;&nbsp;&nbsp; <span class="fa fa-ellipsis-v"></span> </span> </li> <li class="k-item tabClick k-state-default" id="tab_3" value="3" role="tab" aria-controls="tabStripSecondaryElements-2"> <span class="k-loading k-complete"></span> <span unselectable="on" class="k-link"> Router&nbsp;&nbsp;&nbsp; <span class="fa fa-ellipsis-v"></span> </span> </li> <li class="k-item tabClick k-state-default" id="tab_4" value="4" role="tab" aria-controls="tabStripSecondaryElements-3"> <span class="k-loading k-complete"></span> <span unselectable="on" class="k-link"> Smart City Sensor&nbsp;&nbsp;&nbsp; <span class="fa fa-ellipsis-v"></span> </span> </li> <li class="k-item tabClick k-state-default" id="tab_5" value="5" role="tab" aria-controls="tabStripSecondaryElements-4"> <span class="k-loading k-complete"></span> <span unselectable="on" class="k-link"> ZigBee Power Cable&nbsp;&nbsp;&nbsp; <span class="fa fa-ellipsis-v"></span> </span> </li> <li class="k-item tabClick k-state-default" id="tab_6" value="6" role="tab" aria-controls="tabStripSecondaryElements-5"> <span class="k-loading k-complete"></span> <span unselectable="on" class="k-link"> Tracker&nbsp;&nbsp;&nbsp; <span class="fa fa-ellipsis-v"></span> </span> </li> <li class="k-item tabClick k-state-default" id="tab_7" value="7" role="tab" aria-controls="tabStripSecondaryElements-6"> <span class="k-loading k-complete"></span> <span unselectable="on" class="k-link"> Fleet Intelligence&nbsp;&nbsp;&nbsp; <span class="fa fa-ellipsis-v"></span> </span> </li> <li class="k-item tabClick k-state-default" id="tab_8" value="8" role="tab" aria-controls="tabStripSecondaryElements-7"> <span class="k-loading k-complete"></span> <span unselectable="on" class="k-link"> Mobile&nbsp;&nbsp;&nbsp; <span class="fa fa-ellipsis-v"></span> </span> </li> <li class="k-item tabClick k-state-default" id="tab_9" value="9" role="tab" aria-controls="tabStripSecondaryElements-8"> <span class="k-loading k-complete"></span> <span unselectable="on" class="k-link"> Double Door&nbsp;&nbsp;&nbsp; <span class="fa fa-ellipsis-v"></span> </span> </li> <li class="k-item tabClick k-state-default" id="tab_87" value="87" role="tab" aria-controls="tabStripSecondaryElements-10"> <span class="k-loading k-complete"></span> <span unselectable="on" class="k-link"> Test&nbsp;&nbsp;&nbsp; <span class="fa fa-ellipsis-v"></span> </span> </li> </ul> 

作为替代方案，以避免closest()你可以使用:has直接选择li ：

 var $li = $('li.k-item.tabClick.k-state-default:has(span.k-link:contains("Router"))'); $li.css('color', '#C00'); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="tabStripSecondaryElements" class="k-tabstrip-items k-reset" data-role="tabstrip" style="margin-left: 37px; margin-right: 40px;" role="tablist" aria-activedescendant="tab_0"> <li class="k-item tabClick k-state-default k-first" id="tab_1" value="1" role="tab" aria-controls="tabStripSecondaryElements-1"> <span class="k-loading k-complete"></span> <span unselectable="on" class="k-link"> Automobile&nbsp;&nbsp;&nbsp; <span class="fa fa-ellipsis-v"></span> </span> </li> <li class="k-item tabClick k-state-default" id="tab_3" value="3" role="tab" aria-controls="tabStripSecondaryElements-2"> <span class="k-loading k-complete"></span> <span unselectable="on" class="k-link"> Router&nbsp;&nbsp;&nbsp; <span class="fa fa-ellipsis-v"></span> </span> </li> <li class="k-item tabClick k-state-default" id="tab_4" value="4" role="tab" aria-controls="tabStripSecondaryElements-3"> <span class="k-loading k-complete"></span> <span unselectable="on" class="k-link"> Smart City Sensor&nbsp;&nbsp;&nbsp; <span class="fa fa-ellipsis-v"></span> </span> </li> <li class="k-item tabClick k-state-default" id="tab_5" value="5" role="tab" aria-controls="tabStripSecondaryElements-4"> <span class="k-loading k-complete"></span> <span unselectable="on" class="k-link"> ZigBee Power Cable&nbsp;&nbsp;&nbsp; <span class="fa fa-ellipsis-v"></span> </span> </li> <li class="k-item tabClick k-state-default" id="tab_6" value="6" role="tab" aria-controls="tabStripSecondaryElements-5"> <span class="k-loading k-complete"></span> <span unselectable="on" class="k-link"> Tracker&nbsp;&nbsp;&nbsp; <span class="fa fa-ellipsis-v"></span> </span> </li> <li class="k-item tabClick k-state-default" id="tab_7" value="7" role="tab" aria-controls="tabStripSecondaryElements-6"> <span class="k-loading k-complete"></span> <span unselectable="on" class="k-link"> Fleet Intelligence&nbsp;&nbsp;&nbsp; <span class="fa fa-ellipsis-v"></span> </span> </li> <li class="k-item tabClick k-state-default" id="tab_8" value="8" role="tab" aria-controls="tabStripSecondaryElements-7"> <span class="k-loading k-complete"></span> <span unselectable="on" class="k-link"> Mobile&nbsp;&nbsp;&nbsp; <span class="fa fa-ellipsis-v"></span> </span> </li> <li class="k-item tabClick k-state-default" id="tab_9" value="9" role="tab" aria-controls="tabStripSecondaryElements-8"> <span class="k-loading k-complete"></span> <span unselectable="on" class="k-link"> Double Door&nbsp;&nbsp;&nbsp; <span class="fa fa-ellipsis-v"></span> </span> </li> <li class="k-item tabClick k-state-default" id="tab_87" value="87" role="tab" aria-controls="tabStripSecondaryElements-10"> <span class="k-loading k-complete"></span> <span unselectable="on" class="k-link"> Test&nbsp;&nbsp;&nbsp; <span class="fa fa-ellipsis-v"></span> </span> </li> </ul> 

Answer 2

如果您对Pure JavaScript方法感兴趣，则可以使用textContent属性从每个li元素内部检索文本，然后使用indexOf（）方法检查元素的文本是否包含字符串。

var x = document.querySelectorAll(".k-item.tabClick.k-state-default");

x.forEach(li => {
  if(li.textContent.indexOf("Router") != -1){
    li.style.color = "red";
    return li;
  }
});

---

您可以通过将一个字符串作为参数传递，然后将每个元素的文本内容与该字符串进行比较，从而使可重复使用的函数checkText()用于检查不同的字符串。

检查并运行下面的代码片段 ，以获取此可重用功能的实际示例：

 /* JavaScript */ var x = document.querySelectorAll(".k-item.tabClick.k-state-default"); function checkText(e) { x.forEach(li => { if(li.textContent.indexOf(e) != -1){ console.log(e + " is found and has been marked red!!"); li.style.color = "red"; return li; } }); } checkText("Router"); checkText("Mobile"); 

 <!-- HTML --> <ul id="tabStripSecondaryElements" class="k-tabstrip-items k-reset" data-role="tabstrip" style="margin-left: 37px; margin-right: 40px;" role="tablist" aria-activedescendant="tab_0"> <li class="k-item tabClick k-state-default k-first" id="tab_1" value="1" role="tab" aria-controls="tabStripSecondaryElements-1"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Automobile&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li> <li class="k-item tabClick k-state-default" id="tab_3" value="3" role="tab" aria-controls="tabStripSecondaryElements-2"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Router&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li> <li class="k-item tabClick k-state-default" id="tab_4" value="4" role="tab" aria-controls="tabStripSecondaryElements-3"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Smart City Sensor&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li> <li class="k-item tabClick k-state-default" id="tab_5" value="5" role="tab" aria-controls="tabStripSecondaryElements-4"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> ZigBee Power Cable&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li> <li class="k-item tabClick k-state-default" id="tab_6" value="6" role="tab" aria-controls="tabStripSecondaryElements-5"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Tracker&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li> <li class="k-item tabClick k-state-default" id="tab_7" value="7" role="tab" aria-controls="tabStripSecondaryElements-6"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Fleet Intelligence&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li> <li class="k-item tabClick k-state-default" id="tab_8" value="8" role="tab" aria-controls="tabStripSecondaryElements-7"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Mobile&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li> <li class="k-item tabClick k-state-default" id="tab_9" value="9" role="tab" aria-controls="tabStripSecondaryElements-8"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Double Door&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li> <li class="k-item tabClick k-state-default" id="tab_87" value="87" role="tab" aria-controls="tabStripSecondaryElements-10"><span class="k-loading k-complete"></span><span unselectable="on" class="k-link"> Test&nbsp;&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span></span></li> </ul>