javascript - 通过内部跨度的内部文本查找 li 元素
问题描述
我有如下 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 <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 <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 <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 <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 <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 <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 <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 <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 <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")');
有没有其他方法可以得到这个？
解决方案
问题在于您的选择器。类之间有空格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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<span class="fa fa-ellipsis-v"></span>
</span>
</li>
</ul>推荐阅读
- excel - VBA表格：无法获得任何按钮，在中心输入数学
- angular - 角度响应消息
- flutter - 请帮助我从这段代码中理解 fromMap 和 toMap ？
- appium - iOS Predicate 文本没有找到元素，而是在 appium java 中使用 Xpath
- python - python与对象模拟多个对象
- jquery - 如何使用 jquery 显示 json 对象
- vb.net - 我正在开发一个将批量短信发送到不同号码的项目，我希望它用分隔符分隔
- php - 为什么 Docker 不加载 Tidy？
- python - 区分 IP 地址和 FQDN
- python - python - 修改从内存中的 yaml 文件读取的流内容