Pure JS equivalent of Jquery eq()
What is the pure equivalent of jquery’s eq(). For example, how may I achieve
$(".class1.class2").eq(0).text(1254);
in pure javascript?
To get the element index in the array you can use [] in javascript. So to reproduce your code you can use this:
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().
Demo here
More reading:
MDN: textContent
MDN: innerHTML
MDN: querySelectorAll
querySelectorAll returns an array, so you can get the element 0 using index
document.querySelectorAll(".class1.class2")[0].innerHTML = 1254
Here’s one way to achieve it. Tested working! It splits up the string you want to select into the parts before the :eq and after the :eq, and then runs them separately. It repeats until there’s no more :eq left.
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];
};
document.querySelectorAll(".class1.class2")[0].innerHTML = '1254';
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.
Syntax
elementList = baseElement.querySelectorAll(selectors);
https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelectorAll
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.
However, if you want anything other than the first, then you will need querySelectorAll.
