Pure JS equivalent of Jquery eq()

Pure JS equivalent of Jquery eq()

本文关键字：eq Jquery of JS equivalent Pure      更新时间：2023-09-26

什么是jquery的eq()的纯等价物。例如，我如何实现

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

在纯JavaScript中？

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

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

或

document.querySelectorAll('.class1.class2')[0].innerHTML = 1254;
  • 在您的示例中，1254是一个数字，如果您有字符串，则应将= 'string';与引号一起使用。
  • 如果您只寻找一个/第一个元素，则可以仅使用.querySelector()窃取.querySelectorAll()。

在这里演示

更多阅读：

MDN：文本内容
MDN： innerHTML
MDN： querySelectorAll

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

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

这是实现它的一种方法。测试工作！它将要选择的字符串拆分为: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];
};

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

Element.querySelectorAll

总结

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

语法

elementList = baseElement.querySelectorAll(selectors);

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

由于您只得到第一个，因此document.querySelector(".class1.class2")就足够了。它返回元素本身，并且不必为了获取第一个而构建整个节点列表。

但是，如果您想要第一个以外的任何东西，那么您将需要 querySelectorAll .

相关文章：