纯JS相当于Jquery eq()

什么是jquery的eq()的纯粹等价物。 例如,我该如何实现

 $(".class1.class2").eq(0).text(1254); 

在纯JavaScript中?

要获取数组中的元素索引,可以在javascript中使用[] 。 因此,要重现您的代码,您可以使用:

 document.querySelectorAll('.class1.class2')[0].textContent = 1254; 

要么

 document.querySelectorAll('.class1.class2')[0].innerHTML = 1254; 
  • 在你的例子中, 1254是一个数字,如果你有一个字符串,你应该使用= 'string'; 带引号。
  • 如果你只是在寻找一个/第一个元素,你可以使用.querySelector().querySelectorAll()

在这里演示

更多阅读:

MDN: textContent
MDN: innerHTML
MDN: querySelectorAll

这是实现它的一种方法。 经过测试工作! 它将您要选择的字符串拆分为:eq之前和之后的部分:eq ,然后单独运行它们。 它重复直到不再有:eq离开。

 var querySelectorAllWithEq = function(selector, document) { var remainingSelector = selector; var baseElement = document; var firstEqIndex = remainingSelector.indexOf(':eq('); while (firstEqIndex !== -1) { var leftSelector = remainingSelector.substring(0, firstEqIndex); var rightBracketIndex = remainingSelector.indexOf(')', firstEqIndex); var eqNum = remainingSelector.substring(firstEqIndex + 4, rightBracketIndex); eqNum = parseInt(eqNum, 10); var selectedElements = baseElement.querySelectorAll(leftSelector); if (eqNum >= selectedElements.length) { return []; } baseElement = selectedElements[eqNum]; remainingSelector = remainingSelector.substring(rightBracketIndex + 1).trim(); // Note - for now we just ignore direct descendants: // 'a:eq(0) > i' gets transformed into 'a:eq(0) i'; we could maybe use :scope // to fix this later but support is iffy if (remainingSelector.charAt(0) === '>') { remainingSelector = remainingSelector.substring(1).trim(); } firstEqIndex = remainingSelector.indexOf(':eq('); } if (remainingSelector !== '') { return Array.from(baseElement.querySelectorAll(remainingSelector)); } return [baseElement]; }; 

querySelectorAll返回一个数组,因此您可以使用索引获取元素0

 document.querySelectorAll(".class1.class2")[0].innerHTML = 1254 
 document.querySelectorAll(".class1.class2")[0].innerHTML = '1254'; 

Element.querySelectorAll

摘要

返回从调用它的元素的所有元素的非实时NodeList,该元素与指定的CSS选择器组匹配。

句法

 elementList = baseElement.querySelectorAll(selectors); 

https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelectorAll

由于您只获得第一个,因此document.querySelector(".class1.class2")就足够了。 它返回元素本身,并且不必为了获得第一个而构建整个节点列表。

但是,如果你想要的不是第一个,那么你需要querySelectorAll