Чистый JS эквивалент Jquery eq()

Что такое чистый эквивалент в jQuery eq(). Например, как я могу достичь

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

в чистом javascript?

9
javascript jquery

6 ответов

чтобы получить индекс элемента в массиве, вы можете использовать [] в javascript. Поэтому для воспроизведения кода Вы можете использовать следующее:

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

или

document.querySelectorAll('.class1.class2')[0].innerHTML = 1254;
    1254 - это число, если у вас есть строка, вы должны использовать = 'string'; с цитатами.
  • если вы ищете только один / первый элемент, который вы можете использовать только .querySelector() insteal из .querySelectorAll().

демо здесь

читать:

MDN:textContent
MDN:innerHTML
MDN:querySelectorAll

20

вот один из способов ее достижения. Проверенная работа! Он разбивает строку, которую вы хотите выбрать, на части перед :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];
};
2

querySelectorAll возвращает массив, поэтому вы можете получить элемент 0 использование index

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

элемент.querySelectorAll

резюме

возвращает не-живой NodeList всех элементов, происходящих от элемента, на котором он вызывается, которые соответствуют указанной группе селекторов CSS.

синтаксис

elementList = baseElement.querySelectorAll(selectors);

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

0

Так как вы получаете только первый,document.querySelector(".class1.class2") хватит. Он возвращает сам элемент и не должен создавать весь список узлов, чтобы получить первый.

однако, если вы хотите что-нибудь, кроме первого, то вам понадобится querySelectorAll.

0