Tương đương nguyên chất của jquery là eq()
. Ví dụ: làm cách nào để có thể đạt đượcJS thuần túy tương đương với Jquery eq()
$(".class1.class2").eq(0).text(1254);
trong javascript thuần túy?
Tương đương nguyên chất của jquery là eq()
. Ví dụ: làm cách nào để có thể đạt đượcJS thuần túy tương đương với Jquery eq()
$(".class1.class2").eq(0).text(1254);
trong javascript thuần túy?
Để 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;
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..querySelector()
insteal của .querySelectorAll()
.Demo here
More đọc:
MDN: textContent
MDN: innerHTML
MDN: querySelectorAll
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
document.querySelectorAll(".class1.class2")[0].innerHTML = '1254';
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
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
.
Đâ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];
};