Pure JS equivalent of Jquery eq()

What is the pure equivalent of jquery’s eq(). For example, how may I achieve


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;


document.querySelectorAll('.class1.class2')[0].innerHTML = 1254;
  • In your example 1254 is 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';


Read More:   Length of a JavaScript object


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.


elementList = baseElement.querySelectorAll(selectors);


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.

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts