Cách Thêm CSS Class vào Phần Tử trong jQuery

Cách đơn giản nhất để chèn CSS class vào phần tử HTML đó là sử dụng method addClass() của jQuery. Có hai cách sử dụng method .addClass() của jQuery:

Thêm CSS Class Sử Dụng Cú Pháp .addClass(className)

Với cách này chúng ta sẽ sử dụng đối số truyền vào là một chuỗi chứa một hoặc nhiều CSS class sẽ được thêm vào phần tử:

$('#my-el').addClass("new-class-1 new-class-2");

Kết thúc câu lệnh trên phần tử #my-el sẽ được gắn thêm hai CSS class là new-class-1 và new-class-2.

Thêm CSS Class Sử Dụng Cú Pháp .addClass(function)

Với cách này chúng ta sẽ sử dụng đối số truyền vào là một hàm thay vì một chuỗi. Ví dụ như sau:

$("ul li").addClass(function (index) {
    return "item-" + index;
});

Với cách sử dụng method .addClass() như trên thì jQuery sẽ lặp qua từng phần tử li có trong danh sách và index chính là thứ tự ứng với phần tử này trong danh sách. Kết quả trả về quả hàm sẽ xác định CSS class được thêm vào phần tử.

Kết thúc câu lệnh trên mỗi phần tử li sẽ được thêm lần lượt các CSS class bắt đầu từ phần tử đầu tiên (nếu có) sẽ là item-0, phần tử thứ hai (nếu có) là item-1, phần tử thứ 3 (nếu có) item-2...