Javascript Jquery eq（）的纯JS等价物

jquery的

eq（）

的纯等价物是什么。例如，我该如何实现

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

---

在纯javascript中？

querySelectorAll

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

0

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

---

要获取数组中的元素索引，可以在javascript中使用

[]

。因此，要复制代码，可以使用以下方法：

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

或

• 在您的示例中，

  1254

  是一个数字，如果您有一个字符串，您应该使用

  ='string'带引号
  如果只查找一个/第一个元素，则可以使用
  .querySelector（）
  而不是
  .queryselectoral（）
  

演示

更多阅读：

MDN:
MDN:
MDN：

---

元素。查询选择全部

总结

返回一个非活动节点列表，其中包含从调用它的元素派生的、与指定的CSS选择器组匹配的所有元素

语法

elementList = baseElement.querySelectorAll(selectors);

---

因为您只得到第一个，所以

document.querySelector（“.class1.class2”）

就足够了。它返回元素本身，不必构建整个节点列表来获取第一个节点

---

但是，如果您想要的不是第一个，那么您将需要

querySelectorAll

以下是实现它的一种方法。测试工作！它将要选择的字符串拆分为

：eq

之前和

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

elementList = baseElement.querySelectorAll(selectors);

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