Bài viết Câu hỏi About RongvangIT
profile Pic
0
0

Đăng ngày:

 

Sửa ngày:

581 Lượt xem

Lấy phần tử từ class trong jQuery

JavaScriptjQuery

Trong quá trình làm web thì mình thường phải lấy class cũng như là phần tử từ class trong jQuery để xử lý.
Mình sẽ memo lại cho tiện dùng sau này và chia sẻ cho mọi người.

Lấy class trong jquery

Giả sử chúng ta có 3 button được đặt tên class là ‘record-btn’ như sau:

<div class="record-btn">
  <button>Button 1</button>
</div>

<div class="record-btn">
  <button>Button 2</button>
</div>

<div class="record-btn">
  <button>Button 3</button>
</div>

Để lấy tập hợp 3 button có cùng tên class ‘record-btn’ ở trên, chúng ta có thể dùng lệnh jquery như sau:

var el = $('.record-btn button');

console.log(el);

Kết quả:
lay-class-trong-jquerry.png

Lấy phần tử từ class trong jQuerry

Sau khi đã lấy được tập hợp các button có cùng tên class như trên, chúng ta có thể dùng lệnh .each để truy cập và lấy cũng như thao tác với từng nút trong đó.

Ví dụ như in chúng ra:

var el = $('.record-btn button');
$.each(el, function (index, value) {
    console.log(index, value);
});

Kết quả:
lay-phan-tu-tu-class-trong-jquerry.png

Hoặc là thay giá trị của nút thứ 2 (index = 1) bằng một giá trị khác với lệnh .html():

var el = $('.record-btn button');
$.each(el, function (index, value) {
    if( index == 1){
        value.html('hoge')
        console.log(index, value);
    }
});

Kết quả:
lay-phan-tu-tu-class-trong-jquerry2.png

Toàn bộ mã lệnh

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<body>
<div class="record-btn">
  <button>Button 1</button>
</div>

<div class="record-btn">
  <button>Button 2</button>
</div>

<div class="record-btn">
  <button>Button 3</button>
</div>    

</body>

<script type="text/javascript">
var el = $('.record-btn button');
$.each(el, function (index, value) {
    if( index == 1){
        $(value).html('hoge')
        console.log(index, value);
    }
});
</script>

Tổng kết

Trên đây Kiyoshi đã chia sẻ cách lấy class cũng như là phần tử từ class trong jQuery rồi.
Mong là nó sẽ có ích cho mọi người.

kiyoshi
Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.

Bình luận

Bài viết chưa có bình luận. Hãy trở thành người bình luận đầu tiên!
Sign up for free and join this conversation.
Sign Up
If you already have a RongvangIT account Login
Danh sách thư mục
Tại sao không đăng ký và nhận được nhiều hơn từ RồngVàngIT ?

Bạn cần đăng nhập để sử dụng chức năng này, cùng hàng loạt các chức năng tuyệt vời khác của RồngVàngIT !

  1. 1. Bạn sẽ nhận được các bài viết phù hợp bằng chức năng theo dõi tag và người dùng.
  2. 2. Bạn có thể đọc lại các thông tin hữu ích bằng chức năng lưu trữ nội dung.
  3. 3. Chia sẻ kiến thức, đặt câu hỏi và ghi lại quá trình trưởng thành của mình cùng RồngVàngIT !
Tạo tài khoản Đăng nhập
profile Pic