純JS相當於Jquery eq（）

Question

什么是jquery的eq()的純粹等價物。 例如，我該如何實現

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

在純JavaScript中？

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

Answer 2

這是實現它的一種方法。 經過測試工作！ 它將您要選擇的字符串拆分為: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];
};

Answer 3

querySelectorAll返回一個數組，因此您可以使用索引獲取元素0

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

Answer 4

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

Answer 5

Element.querySelectorAll

摘要

返回從調用它的元素的所有元素的非實時NodeList，該元素與指定的CSS選擇器組匹配。

句法

elementList = baseElement.querySelectorAll(selectors);

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

Answer 6

由於您只獲得第一個，因此document.querySelector(".class1.class2")就足夠了。 它返回元素本身，並且不必為了獲得第一個而構建整個節點列表。

但是，如果你想要除了第一個之外的任何東西，那么你將需要querySelectorAll 。