使用jQuery检测li元素内指定文本是否存在及问题代码修正

需求说明 #

你需要检查给定HTML代码的li元素内是否存在指定文本「All documentation, requests and payments」，但原检测代码始终返回不符合预期的结果，接下来我们一步步解决这个问题。

目标HTML代码 #

<div class="msos-selecteditems-container" tabindex="0" style="background-color: rgb(255, 255, 0);" title="All documentation, requests and payments, Final documentation"> 
<ul class="msos-selecteditems msos-current-selection-normal" tabindex="-1" aria-label="Selected values for Student Responsibilities" aria-activedescendant="value-selected-item-1"> 
<li class="msos-selected-display-item msos-visible msos-selecteditem-active" name="value-selected-item-1" aria-describedby="value_selecteditems_instructions" id="value-selected-item-1" tabindex="-1" title="" data-value="0" aria-label="All documentation, requests and payments for Student Responsibilities"> 
<span class="msos-selected-display-item-text">All documentation, requests and payments</span> 
<button class="msos-quick-delete" tabindex="-1" name="value-selected-item-delete-1" aria-label="Remove All documentation, requests and payments"> 
<span class="msos-glyph"></span></button> 
</li> 
<li class="msos-selected-display-item msos-visible" name="value-selected-item-2" aria-describedby="value_selecteditems_instructions" id="value-selected-item-2" tabindex="-1" title="" data-value="1" aria-label="Final documentation for Student Responsibilities"> 
<span class="msos-selected-display-item-text">Final documentation</span> 
<button class="msos-quick-delete" tabindex="-1" name="value-selected-item-delete-2" aria-label="Remove Final documentation"> 
<span class="msos-glyph"></span></button> 
</li> 
</ul> 
<div class="msos-selecteditems-toggle-container"> 
<button class="msos-selecteditems-toggle msos-invisible" tabindex="-1" aria-hidden="true" type="button" aria-label="Show 2 more selected items">+2</button> 
</div> 
</div>

原代码的问题分析 #

你的检测代码存在3个关键问题：

1. 选择器语法错误：ul.msos-selecteditems msos-current-selection-normal会被解析为「找ul.msos-selecteditems下的msos-current-selection-normal元素」，但实际上msos-current-selection-normal是同一个ul的类名，应该写成ul.msos-selecteditems.msos-current-selection-normal（多个类名用点连接）。
2. 逻辑判断颠倒：你写的是length == 0时输出Found，但length == 0意味着没有找到目标元素，逻辑完全反了。
3. 不必要的转义字符：选择器里的"是HTML转义符，在JS的jQuery选择器里直接用普通引号即可。

修正后的检测代码 #

方案1：jQuery实现

// 修正选择器和逻辑判断
if ($('ul.msos-selecteditems.msos-current-selection-normal span:contains("All documentation, requests and payments")').length > 0) {
    console.log('Found');
} else {
    console.log('Not Found');
}

方案2：原生JS实现（无需依赖jQuery）

如果不想用jQuery，也可以用原生DOM API实现，还能避免空格干扰：

const targetText = 'All documentation, requests and payments';
// 找到目标ul下的所有目标span元素
const spans = document.querySelectorAll('ul.msos-selecteditems.msos-current-selection-normal .msos-selected-display-item-text');
// 检查是否有span的文本和目标完全匹配（trim处理避免空格问题）
const isFound = Array.from(spans).some(span => span.textContent.trim() === targetText);

if (isFound) {
    console.log('Found');
} else {
    console.log('Not Found');
}

如果不需要精确匹配，只是检查文本是否包含目标内容，可以把===换成includes()。

内容的提问来源于stack exchange，提问作者snowflakes74