纯JS实现JQuery eq()方法的等效方法

Question

什么是 jQuery 的 eq() 方法的纯等效方法？例如，我如何实现：

$(".class1.class2").eq(0).text(1254);

用纯JavaScript实现？

- Kamran Ahmed

Answer 1

要在数组中获取元素索引，可以在javascript中使用[]。因此，要重现您的代码，您可以使用以下代码：

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

或者

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

• 在你的示例中，1254是一个数字，如果你有一个字符串，你应该使用带引号的= 'string';。
• 如果你只需要找到一个/第一个元素，可以使用.querySelector()而不是.querySelectorAll()。

这里有演示点击这里

更多阅读：

MDN：textContent
MDN：innerHTML
MDN：querySelectorAll

- Sergio

Answer 2

以下是一种实现方法，已经测试通过！它将你想要选择的字符串分成了: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];
};

- phsource

Answer 3

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

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

- Arun P Johny

Answer 4

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

- Krzysiek

Answer 5

Element.querySelectorAll

概述

返回一个非实时的NodeList，其中包含从调用它的元素下降的所有元素，这些元素与指定的一组CSS选择器匹配。

语法

elementList = baseElement.querySelectorAll(selectors);

https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelectorAll

- underscore

Answer 6

因为你只需要第一个，document.querySelector(".class1.class2")就足够了。它会返回元素本身，而不必构建整个节点列表来获取第一个。

但是，如果你想要除第一个之外的任何内容，则需要使用querySelectorAll。

- Niet the Dark Absol