• Ngày xuất bản:

Find jQuery: Hướng dẫn tìm phần tử theo class chuẩn nhất

Find jQuery là một trong những kỹ thuật thường được sử dụng khi cần truy xuất các phần tử con theo class cụ thể trong cây DOM. Nhờ vào phương thức find() của jQuery, lập trình viên có thể dễ dàng lựa chọn các phần tử nằm sâu bên trong cấu trúc HTML mà không cần viết nhiều dòng code phức tạp.

Đọc bài viết sau để được giải đáp chi tiết hơn về:

  • Tổng quan về phương thức find() trong jQuery. 
  • 2 cách thường dùng find() để tìm các phần tử class trong jQuery. 
  • So sánh find() và các phương thức khác như children(), closest() và filter(). 

Tổng quan về phương thức find() trong jQuery

Phương thức find() là một phương thức có sẵn trong jQuery, được dùng để tìm tất cả các phần tử con (descendants) của phần tử đã chọn. find() sẽ duyệt toàn bộ DOM từ phần tử được chọn, đi xuống đến các phần tử con cuối cùng.

$(selector).find(descendant_selector)

Trong đó:

  • selector là phần tử được chọn mà bạn muốn tìm tất cả các phần tử con của nó. 
  • descendant_selector là tham số bắt buộc, xác định loại phần tử con cần tìm (có thể là tag, class, id, etc.)
  • Giá trị trả về sẽ là một jQuery object chứa tất cả các phần tử con khớp với điều kiện.

Ví dụ: Trong đoạn mã dưới đây, tất cả các thẻ <span> nằm bên trong thẻ <div> sẽ được làm nổi bật bằng màu xanh lá cây.

<html>
<head>
    <style>
        .descendants * {
            display: block;
            border: 2px solid grey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/
                 jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("div").find("span").css({
                "color": "green",
                "border": "2px solid green"
            });
        });
    </script>
</head>

<body>
    <div class="descendants"
         style="width:500px;">This is the current element !!!
        <p>This is the paragraph element !!!
            <span> This is span element !!!</span>
        </p>
        <p>This is the paragraph element !!!
            <span>This is span element !!!</span>
        </p>
    </div>
</body>

</html>

Giải thích ví dụ trên:

  • Tìm tất cả các thẻ <span> nằm bên trong phần tử <div>, sau đó thay đổi màu chữ và viền của các thẻ <span> này thành màu xanh lá cây.
  • Có 1 thẻ <div> với class là descendants.
  • Bên trong <div> này là 2 đoạn <p>, mỗi đoạn chứa một thẻ <span>.
  • $(document).ready(...): Đảm bảo mã jQuery chỉ chạy sau khi trang tải xong.
  • $("div").find("span"): Chọn tất cả các phần tử <div> trên trang. Từ đó, tìm tất cả thẻ <span> nằm bên trong những thẻ <div> đó.
  • .css({...}): Áp dụng các kiểu CSS mới cho những thẻ <span> tìm được

Cách sử dụng find() trong jQuery để chọn phần tử theo class

Cú pháp chung để tìm phần tử con có class cụ thể

$(parent_selector).find('.class_name')

Ví dụ:

// Tìm tất cả phần tử con có class "highlight" trong div có id "container"$("#container").find('.highlight').css('background-color', 'yellow');
// Tìm tất cả phần tử con có class "item" trong tất cả các ul$("ul").find('.item').addClass('selected');

Cách tìm tất cả phần tử con với class cụ thể bằng jQuery

Giả sử bạn có một tài liệu HTML và cần lấy thông tin về phần tử cha dựa trên class đã biết của phần tử con. Trong trường hợp này, chúng ta sử dụng phương thức closest() thay vì find().

Cách tiếp cận 1

Phương thức on() được sử dụng để gắn sự kiện cho các phần tử đã chọn. Tức là, khi người dùng click vào nút, hàm xử lý sẽ được gọi.

Phương thức closest() được dùng để tìm và trả về phần tử ancestors (cha) gần nhất của phần tử đang được chọn thay vì tìm phần tử con như find(). Nếu phần tử tổ tiên đó tồn tại thì sẽ trả về jQuery object, ngược lại sẽ trả về object rỗng

Ví dụ này sử dụng phương thức closest() để lấy phần tử ancestors khớp đầu tiên của phần tử.

<!DOCTYPE html>
<html>
<head>
    <title>
        How to find a parent class
        name with a known class
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
</head>

<body style="text-align:center;">
    <h1 style="color:red;"> 
        ITviec
    </h1>
    <p id="GFG_UP" style=
        "font-size: 17px; font-weight: bold;">
    </p>
    <div class="parent">
        <div class="child"></div>
    </div>
    <button>
        click here
    </button>
    <p id="GFG_DOWN" style=
        "color: red; font-size: 24px; font-weight: bold;">
    </p>
    <script>
        $('#GFG_UP').text('Click on the button to see result');
        $('button').on('click', function() {
            var object = $('.child').closest('.parent');
            if (object.length) {
                $('#GFG_DOWN').text("className = '.child'"
                    + " with parentName = '.parent'" + " Exists");
            } 
            else {
                $('#GFG_DOWN').text("Not Exists");
            }
        });
    </script>
</body>
</html>

Kết quả của đoạn mã trên:

find jquery - itviec blog

Kết quả sau khi nhấn vào nút button:

Cách tiếp cận 2

Hoặc bạn có thể thực hiện theo cách số 2 như sau:

  • Phương thức on() được dùng để gắn hàm xử lý sự kiện cho các phần tử được chọn. Tức là, khi người dùng click vào nút, hàm sẽ được gọi.
  • Phương thức parent() được sử dụng để trả về phần tử cha trực tiếp của phần tử đang được chọn.
  • Nếu phần tử cha đó có class thì sẽ trả về tên class, ngược lại sẽ trả về thông báo là không tồn tại.

Dưới đây là ví dụ về tìm class của phần tử cha (parent) dựa trên class của phần tử con (.child). Khi người dùng click vào nút, chương trình sẽ kiểm tra xem phần tử con .child có nằm bên trong phần tử cha .parent hay không, rồi hiển thị kết quả.

<!DOCTYPE html>
<html>
<head>
    <title>
        How to find a parent class
        name with a known class
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
</head>
<body style="text-align:center;">
    <h1 style="color:red;"> 
        ITviec 
    </h1>
    <p id="GFG_UP" style=
        "font-size: 17px; font-weight: bold;">
    </p>
    <div class="parent">
        <div class="child"></div>
    </div>
    <button>
        click here
    </button>
    <p id="GFG_DOWN" style=
        "color: red; font-size: 24px; font-weight: bold;">
    </p>
    <script>
        $('#GFG_UP').text('Click on the button to see result');
        $('button').on('click', function() {
            var object = $('.child').parents('.parent');
            if (object.length) {
                $('#GFG_DOWN').text("className = '.child'"
                    + " with parentName = '.parent'" + " Exists");
            }
            else {
                $('#GFG_DOWN').text("Not Exists");
            }
        });
    </script>
</body>
</html>

Kết quả hiển thị của đoạn mã trên:

find jquery - itviec blog

Kết quả hiển thị khi nhấn vào nút button:

find jquery - itviec blog

Giải thích ví dụ trên:

  • $('#GFG_UP').text('Click on the button to see result'): Thêm dòng hướng dẫn vào thẻ <p id="GFG_UP">
  • $('button').on('click', function() {: Chuỗi gắn sự kiện click cho nút. Khi người dùng click, đoạn mã bên trong sẽ chạy
  • .child: Phần tử con đã biết class
  • .parents('.parent'): Phương thức tìm tất cả ancestors (tổ tiên) của .child, sau đó lọc ra phần tử có class là .parent

Khi bạn nhấn nút jQuery sẽ kiểm tra xem .child có nằm trong .parent không. Nếu có thì thông báo mối quan hệ cha-con tồn tại. Nếu không sẽ hiển thị thông báo “Not Exists”

Cách tìm class của phần tử vừa được click bằng jQuery

Để lấy class của phần tử khi click, bạn có thể sử dụng thuộc tính this.className. Thuộc tính className được dùng để lấy hoặc gán giá trị cho thuộc tính class của một phần tử HTML. Bằng cách này, người dùng có thể thay đổi hoặc truy xuất class hiện tại của phần tử theo ý muốn.

Ở đây, bạn sử dụng this.className để lấy tên class của phần tử div đang được click. Chẳng hạn như trong ví dụ dưới đây, có 5 thẻ div với các class khác nhau. Khi người dùng click vào một div, jQuery sẽ dùng thuộc tính this.className để lấy tên class của phần tử đó và hiển thị ra console.

$("div").click(function () {
    var getClass = this.className;
    console.log(getClass);
});

Khi click vào bất kỳ thẻ div nào, đoạn mã sẽ in ra tên class của phần tử đó trong bảng điều khiển (console).

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to find the class of the 
        clicked element using jquery?
    </title>
    <!-- Import jQuery cdn library -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("div").click(function () {
                var getClass = this.className;
                console.log(getClass);
            });
        });
    </script>
</head>
<body style="text-align: center;">
    <h1 style="color: red;">
       ITviec
    </h1>
    <h3>
        How to find the class of the 
        clicked element using jquery?
    </h3>
    <div class="main">Main Div</div>
    <div class="ITviec">ITviec</div>
    <div class="ITviec Blog">ITviec Blog</div>
    <div class="ITviec Career">ITviec Career</div>
    <div class="welcome">Welcome</div>
</body>
</html>

Kết quả hiển thị của đoạn mã trên:

Giải thích ví dụ trên:

  • 5 phần tử <div>, mỗi cái có một hoặc nhiều class.
  • $(document).ready(...): Đảm bảo mã jQuery chỉ chạy khi tài liệu HTML đã tải xong.
  • $("div").click(...): Gắn sự kiện click cho tất cả các thẻ <div>.
  • this.className: Dùng để lấy tên class của phần tử vừa được click.
  • console.log(getClass): In tên class của phần tử đó ra bảng điều khiển (console).

Đây là ví dụ đơn giản, trực quan để hiểu cách lấy class của phần tử người dùng click. Phù hợp khi bạn cần xác định phần tử nào đang được thao tác, để xử lý tiếp (ẩn, đổi màu, thêm hiệu ứng…).

Nếu muốn kiểm tra riêng lẻ từng class (trong trường hợp có nhiều class), bạn có thể dùng $(this).hasClass('class-name') hoặc tách chuỗi bằng .split(" ").

So sánh find() với các phương thức khác trong jQuery

find() là một trong những hàm phổ biến nhất để tìm kiếm phần tử con nằm sâu bên trong cấu trúc HTML. Tuy nhiên, ngoài find(), jQuery còn cung cấp một số phương thức khác như children(), closest() và filter(). Mỗi phương thức đều có điểm mạnh và trường hợp sử dụng riêng. Sau đây cùng tìm hiểu về sự khác nhau giữa find() và các phương thức trên. 

So sánh find() và children()

Bạn có thể hiểu cơ bản về 2 phương thức này như sau:

  • find(): Được sử dụng để lấy tất cả các phần tử con đã lọc của mỗi phần tử trong tập hợp các phần tử phù hợp hiện tại.
  • children(): Cũng được dùng để lấy tất cả các phần tử con của từng phần tử trong tập hợp đã chọn. Bạn cũng có thể lọc kết quả trả về nếu muốn. Nếu không truyền vào bất kỳ biểu thức lọc nào, children() sẽ trả về tất cả các phần tử con trực tiếp của phần tử đã chọn. Nếu muốn lọc, chỉ cần truyền vào tên phần tử hoặc class cần tìm. Giá trị trả về của children() sẽ chỉ trả về các phần tử con trực tiếp (một cấp) của phần tử đã chọn.

Tóm lại: Cả hai phương thức find() và children() đều dùng để tìm kiếm phần tử con, nhưng cách hoạt động của chúng có một điểm khác biệt quan trọng. Cùng tìm hiểu qua ví dụ dưới đây:

Giả sử bạn có một cấu trúc HTML gồm 3 class là a, b, và c, mỗi class đều chứa hai thẻ <p> nằm ở các cấp khác nhau trong DOM.

<!DOCTYPE html>
<head>
    <!-- jQuery library -->
    <script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" 
            type="text/javascript">
    </script>
</head>
<body>
    <div class=a>
        <p id="a1"> a1 </p>
        <p id="a1"> a2 </p>
        <div class=b>
            <p id="a2"> b1 </p>
            <p id="a2"> b1 </p>
            <div class=c>
                <p id="a3"> c1 </p>
                <p id="a3"> c2 </p>
            </div>
        </div>
    </div>
    <script>
        $(".a").find("p").css('color','red')
        $(".a").children("p").css('color','blue')
    </script>
</body>
</html>

Kết quả hiển thị của đoạn mã trên:

find jquery - itviec blog
  • Khi bạn gọi phương thức find() trên class a, jQuery sẽ đi sâu xuống toàn bộ các cấp con, tìm kiếm thẻ <p> ở mọi nơi bên trong, kể cả cháu, chắt,… của phần tử đó. Nó sẽ kiểm tra tất cả các tầng con bên trong cho đến khi tìm hết.
  • Ngược lại, khi bạn gọi children() trên class a, jQuery chỉ kiểm tra các phần tử con trực tiếp của nó, nghĩa là chỉ kiểm tra ở một cấp đầu tiên, không đi chi tiết vào các cấp bên trong.

Nói cách khác, find() giống như việc “lục tung cả ngôi nhà”, còn children() thì chỉ “liếc nhìn các phòng ngay tầng trệt” mà thôi.

Bảng tóm tắt sự khác nhau giữa find() vs children()

Tiêu chífind()children()
Mục đíchDùng để tìm kiếm nhiều cấp con trong DOM.Dùng để tìm kiếm một cấp con duy nhất trong DOM.
Hiệu suấtChậm hơn so với children() vì phải đi qua nhiều cấp.Nhanh hơn vì chỉ kiểm tra cấp con trực tiếp.
Cú pháp$(selector).find(filter)$(selector).children(filter)
Tham sốNhận vào một biểu thức lọc (filter expression) làm tham số.Cũng nhận một biểu thức lọc, nhưng chỉ áp dụng cho các phần tử con trực tiếp.
Kết quảTrả về tất cả phần tử con (descendants) của phần tử được chọn.Trả về các phần tử con trực tiếp của phần tử được chọn.

So sánh find() và closest()

closest() là phương thức được dùng để tìm phần tử tổ tiên (ancestor) gần nhất của phần tử đang được chọn. Phần tử ancestor có thể là parents, grand-parent, great-grandparents,… 

Cú pháp của closest():

$(selector).closest(filter-expression)

Tham số: Là một biểu thức chọn (selector), một phần tử, hoặc một đối tượng jQuery dùng để lọc và tìm phần tử ancestor.

Phương thức này sẽ di chuyển ngược lên trên DOM, bắt đầu từ phần tử được chọn, đi dần lên đến tận phần tử gốc (<html>) để tìm ancestor khớp với điều kiện.

Ví dụ:

Giả sử bạn có 3 cấp thẻ danh sách không thứ tự <ul>. Khi gọi phương thức closest() trên một thẻ <li>, nó sẽ trả về thẻ <ul> gần nhất bao quanh <li> đó.

<!DOCTYPE html>
<head>
    <!-- jQuery library -->
    <script src=
        "https://code.jquery.com/jquery-git.js">
    </script>
</head>

<body>
    <ul>
        <li>one</li>
        <li>two</li>
        <ul>
            <li>three</li>
            <li>four</li>
            <ul>
                <li id="select-Me">five</li>
                <li>six</li>
            </ul>
        </ul>
    </ul>
    <script>
        $("#select-Me")
            .closest("ul")
            .css("color", "blue");
    </script>
</body>
</html>

Kết quả hiển thị của đoạn mã trên:

find jquery - itviec blog

Bảng so sánh về sự khác biệt giữa find() và closest()

Tiêu chífind()closest()
Mục đíchDùng để lấy tất cả các phần tử con (descendants) thỏa điều kiện trong tập hợp phần tử đang chọn.Dùng để lấy phần tử ancestor gần nhất của phần tử được chọn.
Hướng duyệt DOMDuyệt DOM từ trên xuống, cho đến phần tử con cuối cùng.Duyệt DOM từ dưới lên trên, cho đến đến tận phần tử gốc (<html>).
Phạm vi tìm kiếmĐi xuống cây DOM, kiểm tra phần tử con, rồi con của con, và tiếp tục.Đi lên cây DOM, kiểm tra các phần tử cha.
Cú pháp$(selector).find(filter)$(selector).closest(filter)
Tham sốLấy tham số là filter expressionTham số là filter
Kết quảTrả về các phần tử con (descendant elements) của phần tử được chọn.Trả về phần tử ancestor gần nhất của phần tử được chọn.

So sánh find() và filter()

Phương thức filter() được dùng để lọc các phần tử, chỉ giữ lại những phần tử phù hợp với điều kiện, những phần tử không khớp sẽ bị loại bỏ.

Điểm khác biệt duy nhất giữa find() và filter() là:

  • filter() tìm kiếm trong tất cả các phần tử hiện có (tức là các phần tử đang được chọn).
  • Trong khi đó, find() chỉ tìm kiếm trong các phần tử con của phần tử được chọn mà thôi.
Tiêu chífind()filter()
Mục đíchĐược dùng để tìm tất cả các phần tử con của phần tử được chọnĐược dùng để lọc tất cả các phần tử.
Cách hoạt độngTìm phần tử trong cây DOM bằng cách duyệt từ gốc đến lá.Trả về các phần tử phù hợp và loại bỏ những phần tử không phù hợp.
Phạm vi tìm kiếmChỉ tìm trong các phần tử con.Tìm trong tất cả các phần tử hiện có.
Phần tử rỗngKhông thực thi hàm với các phần tử rỗng.Không thực thi hàm với các phần tử rỗng.
Ảnh hưởng mảng gốcKhông làm thay đổi mảng gốc.Không làm thay đổi mảng gốc.
Cú pháparray.find(function(value, index, array), thisValue)array.filter(function(value, index, array), thisValue)
Nếu không tìm thấy phần tử nào, phương thức này sẽ trả về undefined.Trong filter(), một giá trị sẽ được truyền vào hàm dưới dạng thisValue.

Các câu hỏi thường gặp về find class jQuery

Làm sao để kiểm tra một phần tử có nhiều class bằng jQuery?

Trong jQuery, bạn có thể kiểm tra xem một phần tử có nhiều class hay không bằng cách dùng hàm hasClass() kết hợp với các toán tử logic. Ví dụ, nếu bạn muốn kiểm tra xem một phần tử có đồng thời cả class1 và class2 hay không, bạn có thể viết như sau:

// Kiểm tra phần tử có đồng thời cả class1 VÀ class2

if ($('#element').hasClass('class1') && $('#element').hasClass('class2')) {

    console.log('Element có cả hai class');

}

// Kiểm tra phần tử có ít nhất một trong các class

if ($('#element').hasClass('class1') || $('#element').hasClass('class2')) {

    console.log('Element có ít nhất một trong hai class');

}

Trong đoạn code trên, $('#element') dùng để chọn phần tử có id là ‘element’. Sau đó, hasClass('class1') và hasClass('class2') sẽ kiểm tra xem phần tử đó có chứa cả hai class tương ứng hay không.

Dấu && có nghĩa là cả hai điều kiện đều phải đúng thì đoạn code bên trong mới được thực thi.

Làm sao để xóa một class khỏi phần tử bằng jQuery?

Bạn có thể dùng hàm removeClass() trong jQuery để xóa một class khỏi một phần tử. Ví dụ như sau:

$('#element').removeClass('class1');

Trong đoạn code này, $('#element') sẽ chọn phần tử có id là 'element', còn removeClass('class1') sẽ xóa class 'class1' khỏi phần tử đó nếu nó đang tồn tại. Đây là cách nhanh gọn để cập nhật lại giao diện hay trạng thái của một thành phần HTML.

Làm sao để bật/tắt một class trên phần tử bằng jQuery?

Bạn có thể dùng hàm toggleClass() trong jQuery để bật/tắt một class trên một phần tử. Nghĩa là: nếu phần tử đang có class, thì nó sẽ bị xóa; còn nếu chưa có, thì class đó sẽ được thêm vào. Đây là cách cực kỳ tiện khi bạn muốn thay đổi giao diện hay trạng thái chỉ với một hành động.

$('#element').toggleClass('class1');

Trong đoạn này, $('#element') sẽ chọn phần tử có id là 'element', và toggleClass('class1') sẽ bật/tắt class 'class1' trên phần tử đó. Rất phù hợp để dùng khi làm hiệu ứng hover, ẩn/hiện, chuyển trạng thái… chỉ với một dòng lệnh.

Tổng kết về find jQuery

Find class jQuery là một công cụ mạnh mẽ giúp bạn thao tác linh hoạt với các phần tử con trong DOM. Bằng cách sử dụng find() đúng cách, bạn không chỉ đơn giản hóa code mà còn tăng khả năng tái sử dụng và bảo trì trong các dự án Front-end. Hy vọng với thông tin từ ITviec sẽ giúp bạn học hỏi thêm được những kiến thức mới và làm nền tảng để phát triển tốt trên hành trình lập trình viên nhé.

Xem thêm: jQuery là gì? Những điều cần biết về thư viện JavaScript

Chia sẻ bài viết
TAG:
Chuyên môn IT
TÁC GIẢ
Uyen Ngo
Uyen Ngo

Content Writer

Hơn 1 năm kinh nghiệm viết lách trong lĩnh vực lập trình, thiết kế Game, AI cùng sự nghiên cứu chuyên sâu về các chủ đề IT, Uyên đem đến các bài viết chất lượng và hữu ích về khía cạnh Front-End, Unity, Unreal Engine, Trí tuệ nhân tạo,… Cùng với đó là các bài hướng dẫn lập trình từ cơ bản đến nâng cao (HTML, JavaScript, CSS, Website Development,...). Uyên luôn ưu tiên mang đến thông tin được cập nhật liên tục và phù hợp với xu hướng công nghệ hiện nay.