javascript 纯 JS 等价于 Jquery eq()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18930975/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pure JS equivalent of Jquery eq()
提问by Kamran Ahmed
What is the pure equivalent of jquery's eq(). For example, how may I achieve
什么是 jquery 的eq(). 例如，我如何实现
$(".class1.class2").eq(0).text(1254);
in pure javascript?
在纯 javascript 中？
回答by Sergio
To get the element index in the array you can use []in javascript. So to reproduce your code you can use this:
要获取数组中的元素索引，您可以[]在 javascript 中使用。所以要重现你的代码，你可以使用这个：
document.querySelectorAll('.class1.class2')[0].textContent = 1254;
or
或者
document.querySelectorAll('.class1.class2')[0].innerHTML = 1254;
- In your example
1254is a number, if you have a string you should use= 'string';with quotes. - If you are only looking for one/the first element you can use just
.querySelector()insteal of.querySelectorAll().
- 在您的示例中
1254是一个数字，如果您有一个字符串，则应使用= 'string';引号。 - 如果您只是在寻找一个/第一个元素，您可以只使用
.querySelector()insteal of.querySelectorAll().
Demo here
演示在这里
More reading:
更多阅读：
MDN: textContent
MDN: innerHTML
MDN: querySelectorAll
MDN：textContent
MDN：innerHTML
MDN：querySelectorAll
回答by Arun P Johny
querySelectorAllreturns an array, so you can get the element 0using index
querySelectorAll返回一个数组，因此您可以0使用索引获取元素
document.querySelectorAll(".class1.class2")[0].innerHTML = 1254
回答by phsource
Here's one way to achieve it. Tested working! It splits up the string you want to select into the parts before the :eqand after the :eq, and then runs them separately. It repeats until there's no more :eqleft.
这是实现它的一种方法。经测试有效！它将您要选择的字符串拆分为 之前: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];
};
回答by Krzysiek
document.querySelectorAll(".class1.class2")[0].innerHTML = '1254';
回答by underscore
Element.querySelectorAll
Element.querySelectorAll
Summary
概括
Returns a non-live NodeList of all elements descended from the element on which it is invoked that match the specified group of CSS selectors.
返回一个非活动的 NodeList，它包含所有元素的后代，这些元素来自调用它的元素，这些元素与指定的 CSS 选择器组匹配。
Syntax
句法
elementList = baseElement.querySelectorAll(selectors);
https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelectorAll
https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelectorAll
回答by Niet the Dark Absol
Since you're only getting the first one, document.querySelector(".class1.class2")will suffice. It returns the element itself, and doesn't have to build an entire node list just to get the first.
因为你只得到第一个，document.querySelector(".class1.class2")就足够了。它返回元素本身，并且不必为了获得第一个而构建整个节点列表。
However, if you want anything other than the first, then you will need querySelectorAll.
但是，如果您想要第一个以外的任何东西，那么您将需要querySelectorAll.
