如何从<li>元素中获取值？多筛选模块取值实现

我搭建了三个不同的筛选模块及一个筛选按钮，计划基于这些模块实现筛选功能，现咨询如何获取各模块内<ul>下<li>元素中的值。

对应的HTML结构：

<div id="new-items" class="dropdown">
<a href="#" class="btn-selector nolink">New Items</a>
<ul class="">
  <li><span>New bestsellers</span></li>
  <li><span>New releases</span></li>
</ul>
</div>
<div id="buy" class="dropdown">
  <a href="#" class="btn-selector nolink">Buy Now</a>
  <ul class="">
    <li><span>Wallet</span></li>
    <li><span>Website</span></li>
  </ul>
</div>
<div id="sort-by" class="dropdown">
  <a href="#" class="btn-selector nolink">Sort By</a>
  <ul class="">
    <li><span>Low To High Price</span></li>
    <li><span>High To Low Price</span></li>
    <li><span>View</span></li>
    <li><span>View</span></li>
    <li><span>Rating</span></li>
    <li><span>Sale</span></li>
    <li><span>Date</span></li>
  </ul>
</div>

<button class="sc-button style letter style-2 filter"><span>Filter</span> </button>

要实现这个需求，核心是先给每个筛选模块的选项添加选中交互，再通过筛选按钮收集各模块的选中值，下面是具体实现方式：

一、原生JavaScript实现 #

1. 给选项添加选中交互 #

绑定点击事件，让用户点击<li>时标记选中状态，同时更新模块按钮的显示文本：

// 获取所有筛选模块下的li元素
const filterItems = document.querySelectorAll('.dropdown ul li');

filterItems.forEach(item => {
  item.addEventListener('click', function() {
    // 清除当前模块内所有li的选中状态
    const parentUl = this.closest('ul');
    parentUl.querySelectorAll('li').forEach(li => li.classList.remove('selected'));
    // 标记当前点击的li为选中
    this.classList.add('selected');
    // 更新模块按钮的显示文本
    const dropdownBtn = this.closest('.dropdown').querySelector('.btn-selector');
    dropdownBtn.textContent = this.querySelector('span').textContent;
  });
});

2. 点击筛选按钮收集选中值 #

给按钮绑定点击事件，遍历每个模块获取选中的选项值：

const filterBtn = document.querySelector('.filter');

filterBtn.addEventListener('click', function() {
  const filterParams = {};

  // 遍历每个筛选模块
  document.querySelectorAll('.dropdown').forEach(dropdown => {
    const moduleId = dropdown.id;
    // 获取当前模块选中的文本，无选中时设为空字符串
    const selectedText = dropdown.querySelector('li.selected span')?.textContent.trim() || '';
    filterParams[moduleId] = selectedText;
  });

  // 这里替换成你的筛选逻辑，比如发起请求或处理数据
  console.log('当前筛选参数：', filterParams);
  // 示例输出：{ "new-items": "New bestsellers", "buy": "Wallet", "sort-by": "Low To High Price" }
});

3. 可选：添加选中样式（CSS） #

给选中的<li>加样式，让用户能直观看到选中状态：

.dropdown ul li {
  cursor: pointer;
  padding: 8px 12px;
}
.dropdown ul li.selected {
  background-color: #f5f5f5;
  color: #2d3748;
  font-weight: 500;
}

二、jQuery实现（项目已引入jQuery时使用） #

1. 绑定选中交互 #

$('.dropdown ul li').click(function() {
  // 清除同模块其他li的选中状态
  $(this).siblings().removeClass('selected');
  // 标记当前li为选中
  $(this).addClass('selected');
  // 更新模块按钮文本
  $(this).closest('.dropdown').find('.btn-selector').text($(this).find('span').text());
});

2. 点击按钮收集筛选值 #

$('.filter').click(function() {
  const filterParams = {};
  $('.dropdown').each(function() {
    const moduleId = $(this).attr('id');
    const selectedText = $(this).find('li.selected span').text().trim() || '';
    filterParams[moduleId] = selectedText;
  });
  console.log('当前筛选参数：', filterParams);
  // 执行你的筛选逻辑
});

额外需求处理 #

如果不需要选中状态，只是想获取所有<li>的文本值，可以直接遍历收集：

// 获取所有选项的文本数组
const allOptionTexts = Array.from(document.querySelectorAll('.dropdown ul li span')).map(span => span.textContent.trim());
console.log(allOptionTexts);

如果需要按模块分组获取所有选项：

const allModuleOptions = {};
document.querySelectorAll('.dropdown').forEach(dropdown => {
  const moduleId = dropdown.id;
  allModuleOptions[moduleId] = Array.from(dropdown.querySelectorAll('ul li span')).map(span => span.textContent.trim());
});
console.log(allModuleOptions);

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