jquery eq（）的純JS相當於（）

Question

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

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

in pure javascript？

Answer 1

要獲得數組中的元素索引，你可以在JavaScript中使用[]獲得元素0。所以，重現你的代碼，你可以這樣做：

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

或

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

• 在您的例子1254是一個數字，如果你有一個字符串，你應該使用= 'string';用引號。
• 如果您只是在尋找一個/第一個元素，你可以使用.querySelector().querySelectorAll()的insteal。

演示here

更多閱讀：

MDN：textContent
MDN：innerHTML
MDN：querySelectorAll

Answer 2

querySelectorAll返回一個數組，這樣你就可以使用索引

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

Answer 3

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

Answer 4

Element.querySelectorAll

摘要

返回所有元素的非實時節點列表從在其上調用CSS選擇的指定的組相匹配的元件的後裔。

語法

elementList = baseElement.querySelectorAll(selectors); 

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

Answer 5

既然你只得到了第一個，document.querySelector(".class1.class2")就足夠了。它返回元素本身，並且不必爲了獲得第一個而構建整個節點列表。

但是，如果你想要第一個以外的東西，那麼你將需要querySelectorAll。

Answer 6

以下是實現它的一種方法。測試工作！它將要選擇的字符串分割成: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]; 
};