Pure JS equivalent of Jquery eq()

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?

Answer by Arun P Johny for Pure JS equivalent of Jquery eq()

querySelectorAll returns an array, so you can get the element 0 using index

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

Answer by Krzysiek for Pure JS equivalent of Jquery eq()

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

Answer by Sergio for Pure JS equivalent of Jquery eq()

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 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

Answer by underscore for Pure JS equivalent of Jquery eq()

class="descans">

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

Answer by Niet the Dark Absol for Pure JS equivalent of Jquery eq()

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.

Answer by phsource for Pure JS equivalent of Jquery eq()

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];  };  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72