Lấy phần tử trước đó trong mảng javascript

Trong JavaScript, bạn có thể sử dụng các thuộc tính nextElementSibling và previousElementSibling để lấy phần tử trước và sau của một phần tử

Giả sử bạn có danh sách các mục sau

<ul>
    <li>🍔li>
    <li>🍕li>
    <li id="drink">🍹li>
    <li>🍲li>
    <li>🍩li>
ul>

Bây giờ bạn muốn lấy mục danh sách ngay trước và sau #drink

Bạn có thể sử dụng thuộc tính previousElementSibling để lấy anh chị em trước một phần tử. Để lấy phần tử anh chị em ngay sau một phần tử, hãy sử dụng thuộc tính nextElementSibling

const drink = document.querySelector('#drink');

// get previous sibling
const pizza = drink.previousElementSibling;

console.log(pizza.innerText); // 🍕

// get next sibling
var pot = drink.nextElementSibling;

console.log(pot.innerText); // 🍲

Nhận tất cả anh chị em trước đây

Để có được tất cả các anh chị em trước đó của một phần tử, bạn có thể sử dụng đoạn mã sau

const previousSiblings = (elem) => {
    // create an empty array
    let siblings = [];

    // loop through previous siblings until `null`
    while (elem = elem.previousElementSibling) {
        // push sibling to array
        siblings.push(elem);
    }
    return siblings;
};

const drink = document.querySelector('#drink');

// get all previous siblings
const siblings = previousSiblings(drink);

siblings.forEach(li => console.log(li.innerText));

// 🍕
// 🍔

Nhận tất cả anh chị em tiếp theo

Ví dụ sau minh họa cách bạn lấy tất cả các anh chị em tiếp theo của một phần tử

const nextSiblings = (elem) => {
    // create an empty array
    let siblings = [];

    // loop through next siblings until `null`
    while (elem = elem.nextElementSibling) {
        // push sibling to array
        siblings.push(elem);
    }
    return siblings;
};

const drink = document.querySelector('#drink');

// get all the next siblings
const siblings = nextSiblings(drink);

siblings.forEach(li => console.log(li.innerText));

// 🍲
// 🍩

Còn về nextSibling và const drink = document.querySelector('#drink'); // get previous sibling const pizza = drink.previousElementSibling; console.log(pizza.innerText); // 🍕 // get next sibling var pot = drink.nextElementSibling; console.log(pot.innerText); // 🍲 0 thì sao?

Bạn có thể đã thấy hoặc nghe nói về các thuộc tính nextSibling và

const drink = document.querySelector('#drink');

// get previous sibling
const pizza = drink.previousElementSibling;

console.log(pizza.innerText); // 🍕

// get next sibling
var pot = drink.nextElementSibling;

console.log(pot.innerText); // 🍲

2 trên StackOverflow

Cả hai thuộc tính này ít nhiều đều làm cùng một việc, trả về phần tử anh em tiếp theo và trước đó của một phần tử. Tuy nhiên, có một sự khác biệt cơ bản giữa chúng

Các thuộc tính nextSibling và

const drink = document.querySelector('#drink');

// get previous sibling
const pizza = drink.previousElementSibling;

console.log(pizza.innerText); // 🍕

// get next sibling
var pot = drink.nextElementSibling;

console.log(pot.innerText); // 🍲

2 trả về các nút anh chị em tiếp theo và trước đó có thể là nút văn bản (khoảng trắng) hoặc nút nhận xét. Tuy nhiên, nextElementSibling và previousElementSibling luôn trả về các nút anh chị em của phần tử không bao gồm khoảng trắng và nhận xét

Làm cách nào để lấy phần tử cuối cùng của mảng trong JavaScript?

Làm cách nào để lấy 10 phần tử đầu tiên của mảng trong JavaScript?

Bạn sẽ lấy phần tử thứ hai của mảng trong JavaScript bằng cách nào?

Tìm kiếm có trả về một mảng trong JS không?