Để tìm phần tử tiếp theo với lớp cụ thể, hãy sử dụng `nextElementSibling` để lấy phần tử tiếp theo. Trong vòng lặp `while`, hãy lặp lại các phần tử tiếp theo và kiểm tra xem danh sách lớp của mỗi phần tử có chứa lớp cụ thể hay không.

Bạn đang xem : cách lấy phần tử tiếp theo trong javascript

Tìm Phần tử tiếp theo với Lớp cụ thể bằng cách sử dụng JS

Tìm Phần tử tiếp theo bằng Lớp cụ thể bằng cách sử dụng JS #

Để tìm phần tử tiếp theo với class:

  1. Sử dụng nextElementSibling để lấy phần tử tiếp theo.
  2. Trong while lặp lại vòng lặp qua các phần tử tiếp theo.
  3. Kiểm tra xem danh sách lớp của mỗi phần tử có chứa lớp cụ thể hay không.

Đây là HTML cho các ví dụ trong bài viết này.

index.html

 

& lt ;!

LOẠI TÀI LIỆU

html

& gt;

& lt;

html

lang

=

"

vi

"

& gt;

& lt;

đầu

& gt; < / p>

& lt;

meta

bộ ký tự

=

"

UTF-8 < p class = "dấu chấm câu"> "

/ & gt;

& lt; /

đầu

& gt;

& lt;

body

& gt; < / p>

& lt;

div

id

=

"

box

"

& gt;

Hộp 1

& lt; /

div

& gt;

& lt;

div

class

=

"

thứ hai

"

& gt;

Hộp 2

& lt; /

div

& gt;

& lt;

div

class

=

"

thứ ba

"

& gt;

Hộp 3

& lt; /

div

& gt;

& lt;

script

src

=

"

index.js < p class = "dấu chấm câu"> "

& gt;

< p class = "token tag">

& lt; /

script

& gt; < / p>

& lt; /

body

& gt;

& lt; /

html

& gt;

Và đây là mã JavaScript có liên quan.

index.js

 

const

box

=

document

.

getElementById

(

'box'

)

;

hãy để

thứ ba

;

let

placeholder

=

box

.

nextElementSibling

;

while

(

trình giữ chỗ

)

{

if

(

trình giữ chỗ

.

classList

.

chứa mã thông báo

(

'thứ ba'

)

)

{

=

trình giữ chỗ thứ ba

;

break

;

}

placeholder

=

placeholder

.

nextElementSibling

;

}

giao diện điều khiển

.

log

< p class = "dấu chấm câu"> (

thứ ba

)

;

Chúng tôi đã sử dụng vòng lặp while để lặp lại các phần tử anh chị em tiếp theo của phần tử với một
id of box .

nextElementSibling
thuộc tính trả về phần tử ngay sau phần tử mà phương thức là
được gọi hoặc null nếu phần tử là phần tử đầu tiên trong danh sách.

Xem Thêm  Phương thức trong JavaScript là gì? - các phương thức trong javascript là gì

Vòng lặp while về cơ bản hoạt động như thế nào – nó tiếp tục lặp lại cho đến khi biểu thức giữa dấu ngoặc đơn trả về falsy Giá trị hoặc chúng tôi phá vỡ khỏi nó.

Các giá trị sai trong JavaScript là: null , undefined , false , 0 , ""
(chuỗi trống), NaN (không phải số).

Vì vậy, chúng tôi biết rằng cuối cùng chúng tôi sẽ tìm thấy nút có lớp thứ ba hoặc chúng tôi sẽ đến phần tử cuối cùng trong danh sách và thoát ra khỏi vòng lặp while .

Chúng tôi đã sử dụng
classList.contains
để kiểm tra xem lớp third có trong danh sách lớp của phần tử hay không.

Nếu có, chúng tôi gán phần tử cho biến third và ngắt ra khỏi
Vòng lặp while .

Nếu không, chúng tôi chỉ định biến placeholder cho phần tử anh em tiếp theo.

Nếu phần tử có lớp cụ thể không tồn tại trong phần tử tiếp theo của phần tử , biến thứ ba sẽ không bao giờ được gán một phần tử và sẽ vẫn được đặt thành giá trị không xác định .


Xem thêm những thông tin liên quan đến chủ đề cách lấy phần tử tiếp theo trong javascript

replace search slice split in js

  • Tác giả: Hữu Long Phùng
  • Ngày đăng: 2020-08-31
  • Đánh giá: 4 ⭐ ( 5111 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: – Sau khi hoàn thành xong các khoá học về HTML CSS rồi thì chúng ta có thể thử nhảy vào làm ngay một cái giao diện xem sao nếu như chúng chưa giống mẫu thì chúng ta cú thể code lại đúng không nào, code đi code lại rồi lại kiểm tra bao giờ cảm thấy chúng giống đến 95% thì các bạn coi như đạt chỉ tiêu của cái giao diện đó rồi nhá.

    – Phần xây dựng giao diện chính là kết quả của việc bạn học HTML CSS có vững hay không chính vì vậy bạn nào cảm thấy mình chưa chắc thì có thể vừa học vừa làm theo nhé.

    Dưới đây là Link các playlist mà mình đã hướng dẫn ở kênh của mình mời các bạn cùng học.

    – HTML: https://www.youtube.com/watchv=rzRB5t…

    – CSS:
    https://www.youtube.com/watch?v=QGf42…

    – JAVASCRIPT:
    https://www.youtube.com/watch?v=CdpDK…

    – JAVASCRIPT NÂNG CAO:
    https://www.youtube.com/watch?v=FeSyN…

    – JQUERY:
    https://www.youtube.com/watch?v=sFnr6…

    – Dựng HTML CSS từ bản thiết kế:
    https://www.youtube.com/watch?v=aoRs9…

    – MONGODB:
    https://www.youtube.com/watch?v=G7ji_…

    – NODEJS:
    https://www.youtube.com/watch?v=frskA…

    – MYSQL:
    https://www.youtube.com/watch?v=9qXCu…

    – PHP BASIC:
    https://www.youtube.com/watch?v=MYO6Q…

    – PHP OOP:
    https://www.youtube.com/watch?v=oL8mq…

    – CÁC BẠN NÀO MUỐN THEO ĐUỔI LẬP TRÌNH WEB MỘT CÁCH BÀI BẢN THÌ KÊNH CỦA MÌNH CHÍNH LÀ LỰA CHỌN ĐÚNG ĐẮN NHẤT MỜI CÁC BẠN CÙNG HỌC TẬP.

    Mọi chi tiết xin liên hệ:

    – Tên: Phùng Hữu Long.

    – Email: phunglongtn@gmail.com.

    – Phone: 0375769686.

    – Zalo: 0375769686.

    – Facebook: https://www.facebook.com/ChuVann

    – Group Facebook: https://www.facebook.com/groups/72682 – Để thêm các hiệu ứng độc lạ cho trang web của bạn mà không cần phải code nhiều chúng ta phải dể đến javascript. Javascript hỗ trợ chúng ta rất nhiều các framework hỗ trợ cho việc thiết kế hiệu ứng. Ngoài ra chúng còn có thể làm việc với dữ liệu ở phía client như form sử dữ liệu bằng cách dữ liệu rồi sau đó chúng ta sẽ làm việc với dữ liệu bằng cách dùng hàm trong javascript. Chính vì vậy nó không thể thiếu nên các bạn hãy học thật tập trung nhé.

    Dưới đây là Link các playlist mà mình đã hướng dẫn ở kênh của mình mời các bạn cùng học.

    – HTML: https://www.youtube.com/watchv=rzRB5tkrWrc&list=PLosyMXBMlg_86Q6ZXgbNU_k2vPkTwupBL

    – CSS:
    https://www.youtube.com/watch?v=QGf42EVpRlA&list=PLosyMXBMlg___ffnTICZv-ppZxYK_3QUh

    – JAVASCRIPT:
    https://www.youtube.com/watch?v=CdpDK_MMk9I&list=PLosyMXBMlg_8j57maoYcyKS2N6Pu2ZMBb

    – JQUERY:
    https://www.youtube.com/watch?v=sFnr6TcbXis&list=PLosyMXBMlg_8sVFKEKWaW33vwiYdYRkEc

    – Dựng HTML CSS từ bản thiết kế:
    https://www.youtube.com/watch?v=aoRs9TNxYCc&list=PLosyMXBMlg__CKFCIzChI5HTgUhJxPkFV

    – CÁC BẠN NÀO MUỐN THEO ĐUỔI LẬP TRÌNH WEB MỘT CÁCH BÀI BẢN THÌ KÊNH CỦA MÌNH CHÍNH LÀ LỰA CHỌN ĐÚNG ĐẮN NHẤT MỜI CÁC BẠN CÙNG HỌC TẬP.

    Mọi chi tiết xin liên hệ:

    – Tên: Phùng Hữu Long.

    – Email: phunglongtn@gmail.com.

    – Phone: 0375769686.

    – Zalo: 0375769686.

    – Facebook: https://www.facebook.com/ChuVann.

    – Group Facebook: https://www.facebook.com/groups/726821888027699 replace search slice split in js

Phần tử ẩn / hiển thị JavaScript

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 7880 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] function showStuff(id, text, btn) { document.getElementById(id).style.display = ‘block’; // hide the lorem ipsum text document.getElementById(text).style.display =…

Cách Lấy Các Phần Tử Bằng Vòng Lặp Javascript

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 5 ⭐ ( 3201 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách sử dụng các tính năng của Javascript để lấy các phần tử trong Array nhé!

JavaScript: phương thức querySelector

  • Tác giả: www.daipho.com
  • Đánh giá: 3 ⭐ ( 7047 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phương thức querySelector() trả về phần tử đầu tiên là phần tử con của phần tử mà nó được gọi ra khớp với nhóm bộ chọn được chỉ định. Lưu ý: Phương thức

Các phương thức xử lý mảng (Array) phổ biến trong JavaScript (Phần 3)

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 8757 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hi, xin chào các bạn, ở phần 1 và phần 2 chúng ta đã tìm hiểu được 15 method của array.

Mảng trong JavaScript

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 3 ⭐ ( 3942 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mảng trong JavaScript – JS Array – Lập Trình Từ Đầu 1 JavaScript Căn Bản

Javascript Array Push: Cách thêm phần tử vào Array S :: Eloquent Javascript

  • Tác giả: gialaipc.com.vn
  • Đánh giá: 3 ⭐ ( 1035 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [ad_1]

    Mảng là danh sách các đối tượng có nguyên mẫu có các phương thức để thực hiện các thao tác đột biến. Độ

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Socket IO là gì? Hướng dẫn sử dụng socket io cơ bản – Lava

By ads_php