纯JS相当于Jquery eq（）

Question

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 1

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 2

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

Answer 3

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

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

Answer 4

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

Answer 5

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 6

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 .