正文

JavaScript中获取奇数li元素的方法

/0 浏览量
1109

在JavaScript中，获取奇数li元素的方法有很多种，这些方法可以帮助你根据不同的需求选择最合适的实现方式。以下是一些常用的方法：

1. 使用querySelectorAll和循环

首先，你可以使用querySelectorAll方法获取所有的li元素，然后通过循环来筛选出奇数索引的元素。

// 获取所有li元素
const lis = document.querySelectorAll('li');

// 创建一个空数组来存储奇数索引的li元素
const oddLis = [];

// 循环遍历所有li元素
lis.forEach((li, index) => {
  // 如果索引是奇数，则添加到oddLis数组中
  if (index % 2 !== 0) {
    oddLis.push(li);
  }
});

// oddLis数组现在包含了所有奇数索引的li元素
console.log(oddLis);

2. 使用filter方法

另一种方法是使用filter方法直接在querySelectorAll返回的节点列表上进行操作。

// 获取所有li元素
const lis = document.querySelectorAll('li');

// 使用filter方法筛选出奇数索引的li元素
const oddLis = Array.from(lis).filter((li, index) => index % 2 !== 0);

// oddLis数组现在包含了所有奇数索引的li元素
console.log(oddLis);

3. 使用Array.from和map方法

你也可以使用Array.from和map方法来获取奇数索引的li元素。

// 获取所有li元素
const lis = document.querySelectorAll('li');

// 使用Array.from将NodeList转换为数组，然后使用map方法筛选出奇数索引的li元素
const oddLis = Array.from(lis).map((li, index) => li).filter((li, index) => index % 2 !== 0);

// oddLis数组现在包含了所有奇数索引的li元素
console.log(oddLis);

4. 使用CSS选择器

如果你只需要获取奇数li元素，并且这些li元素是连续的，你可以使用CSS选择器来直接选择它们。

// 获取所有奇数索引的li元素
const oddLis = document.querySelectorAll('li:nth-child(odd)');

// oddLis节点列表现在包含了所有奇数索引的li元素
console.log(oddLis);

以上方法各有优缺点，你可以根据实际需求选择最合适的方法。例如，如果你需要频繁地获取奇数li元素，并且性能是一个考虑因素，那么使用filter方法可能是一个更好的选择。如果你只需要一次性获取奇数li元素，并且这些元素是连续的，那么使用CSS选择器可能更加方便。

-- 展开阅读全文 --