19

什么是 jquery 的纯等价物eq()。例如，我怎样才能实现

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

在纯javascript中？

4

6 回答 6

34

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

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

或者

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

演示在这里

更多阅读：

MDN：textContent
MDN：innerHTML
MDN：querySelectorAll

于 2013-09-21T09:23:22.807 回答
2

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

document.querySelectorAll(".class1.class2")[0].innerHTML = 1254
于 2013-09-21T09:21:45.483 回答
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];
};
于 2016-03-18T20:15:23.100 回答
0 
document.querySelectorAll(".class1.class2")[0].innerHTML = '1254';
于 2013-09-21T09:22:21.250 回答
0

Element.querySelectorAll

概括

返回调用它的元素的所有元素的非活动 NodeList，这些元素与指定的 CSS 选择器组匹配。

句法

elementList = baseElement.querySelectorAll(selectors);

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

于 2013-09-21T09:25:40.987 回答
0

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

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

于 2013-09-21T09:26:50.847 回答