如何通过<li>文本匹配，使用jQuery/JavaScript设置selected属性

需求说明 #

通过比较<li>标签内的文本内容，为目标<li>元素添加selected属性，并移除其他<li>的该属性。例如：将文本为“Podcasts”的<li>添加上selected属性，同时移除“All Categories”对应的<li>的selected属性。

现有HTML结构 #

<ul class="list">
<li data-value="0" class="option" selected>All Categories</li>
<li data-value="75" class="option">eBriefs</li>
<li data-value="74" class="option">Hawkeye-articles</li>
<li data-value="1" class="option">Hhhhh</li>
<li data-value="93" class="option focus">Hyphen-Newsletter</li>
<li data-value="95" class="option">Infographics</li>
<li data-value="76" class="option">News</li>
<li data-value="134" class="option">Podcast-webinar</li>
<li data-value="79" class="option">Podcasts</li>
<li data-value="81" class="option">Success Stories</li>
<li data-value="94" class="option">Videos</li>
<li data-value="77" class="option">Webinars</li>
<li data-value="83" class="option">Whitepapers</li>
</ul>

原生JavaScript实现 #

// 定义需要选中的目标文本
const targetText = "Podcasts";

// 获取所有带.option类的li元素
const options = document.querySelectorAll('.list .option');

// 遍历所有li，先统一移除selected属性
options.forEach(option => {
  option.removeAttribute('selected');
});

// 筛选出文本匹配的li，添加selected属性
const targetOption = Array.from(options).find(option => {
  // 去除文本前后空白，避免空格干扰匹配
  return option.textContent.trim() === targetText;
});

if (targetOption) {
  targetOption.setAttribute('selected', '');
}

说明 #

• 先批量移除所有<li>的selected属性，确保最终只有目标元素拥有该属性
• 使用trim()处理文本，避免因前后空格导致匹配失败
• 把NodeList转为数组后使用find()方法，精准定位目标元素

jQuery实现 #

// 定义需要选中的目标文本
const targetText = "Podcasts";

// 链式调用：先移除所有selected属性，再为匹配文本的元素添加该属性
$('.list .option')
  .removeAttr('selected')
  .filter(function() {
    return $(this).text().trim() === targetText;
  })
  .attr('selected', '');

说明 #

• jQuery的方法链让代码更简洁，一步完成移除和添加操作
• filter()方法直接筛选出文本匹配的元素，无需额外遍历
• 同样用trim()处理文本，避免空格影响匹配精度

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