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ả:
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ả:
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ả:
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.
Bình luận