JS如何按序号索引选取指定class的元素并获取其文本值

你原有写法存在两个问题：

• 选择器书写错误：$('ex.test')匹配的是标签名为ex、同时携带test类的元素，要选中所有class为test的元素（不限标签类型），选择器应该写.test
• 取值逻辑错误：jQuery对象通过[索引]方括号语法取到的是原生DOM节点，原生节点没有jQuery封装的text()方法，直接调用会抛出类型错误。

jQuery 环境下的正确写法 #

有两种可行方案，索引都是从0开始计数，要取第4个匹配元素就传入索引值3：

• 方案1：用jQuery提供的.eq()方法获取对应索引的jQuery包装对象，直接调用text()提取文本

console.log($('.test').eq(3).text())

• 方案2：如果用方括号取到了原生DOM节点，就调用原生API取文本

// textContent 是标准DOM属性，兼容所有现代浏览器
console.log($('.test')[3].textContent)
// 需要兼容极低版本IE可以用innerText
// console.log($('.test')[3].innerText)

原生JS实现（无需引入jQuery） #

直接用原生选择器API即可实现，不需要依赖任何库：

// 获取所有class为test的元素集合
const testNodeList = document.querySelectorAll('.test')
// 先判断索引是否存在，避免元素不存在时报错
if (testNodeList.length > 3) {
  console.log(testNodeList[3].textContent)
}

提示：不管用哪种方式，按索引取元素前都建议先判断集合长度是否大于目标索引，避免出现Cannot read properties of undefined的运行时错误。

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