JS thuần túy tương đương với Jquery eq()

Question

Tương đương nguyên chất của jquery là eq(). Ví dụ: làm cách nào để có thể đạt được

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

trong javascript thuần túy?

Answer 1

Để có được các chỉ số phần tử trong mảng, bạn có thể sử dụng [] trong javascript. Vì vậy, để tái tạo mã của bạn, bạn có thể sử dụng này:

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

hoặc

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

• Trong ví dụ của bạn 1254 là một con số, nếu bạn có một chuỗi bạn nên sử dụng = 'string'; với dấu ngoặc kép.
• Nếu bạn chỉ tìm kiếm một/yếu tố đầu tiên bạn có thể sử dụng chỉ .querySelector() insteal của .querySelectorAll().

Demo here

More đọc:

MDN: textContent
MDN: innerHTML
MDN: querySelectorAll

Answer 2

querySelectorAll trả về một mảng, vì vậy bạn có thể nhận được các yếu tố 0 sử dụng chỉ số

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

Answer 3

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

Answer 4

Element.querySelectorAll

Tóm tắt

Trả về một NodeList phi sống của tất cả các yếu tố hậu duệ của các yếu tố trên mà nó được gọi phù hợp với nhóm quy định của bộ chọn CSS.

Cú pháp

elementList = baseElement.querySelectorAll(selectors); 

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

Answer 5

Kể từ khi bạn chỉ nhận được cái đầu tiên, document.querySelector(".class1.class2") sẽ đủ. Nó trả về chính phần tử đó và không phải xây dựng toàn bộ danh sách nút chỉ để lấy danh sách đầu tiên.

Tuy nhiên, nếu bạn muốn bất cứ điều gì khác hơn là lần đầu tiên, thì bạn sẽ cần querySelectorAll.

Answer 6

Đây là một cách để đạt được điều đó. Thử nghiệm làm việc! Nó chia nhỏ chuỗi bạn muốn chọn vào các phần trước :eq và sau :eq, sau đó chạy riêng chúng. Nó lặp lại cho đến khi không còn nữa :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]; 
};