/Hàm children trong JQuery API
Các hàm built-in18/10/2023

Hàm children trong JQuery API

Hàm children là một trong các hàm hỗ trợ sẵn (built-in fuctions) JQuery API của thư viện jQuery được sử dụng để lấy các phần tử con trực tiếp của các phần tử trong tập hợp các phần tử đã chọn, có thể được lọc bởi một bộ lọc (selector).

1. Cú pháp hàm children

Cú pháp:

jQuery(selector).children([selector])

Hoặc

$(selector).children([selector])

Tham số

  • selector (tùy chọn): Một chuỗi chứa biểu thức chọn để lọc các phần tử con.

Kết quả trả về

  • Trả về một jQuery object mới chứa các phần tử con trực tiếp được chọn.

Phiên bản hỗ trợ

  • Phiên bản 1.0 của jQuery đã hỗ trợ cú pháp children().

Ghi chú

  • .children() chỉ truy xuất các phần tử con trực tiếp của phần tử đã chọn, không đi xuống nhiều cấp như .find().
  • Kết quả không bao gồm các nút văn bản (text nodes); để bao gồm cả các nút văn bản, sử dụng .contents().
  • Nếu không có selector được cung cấp, hàm này sẽ trả về tất cả các phần tử con trực tiếp của các phần tử đã chọn.
Hàm children trong JQuery API

2. Một số ví dụ sử dụng hàm children

2.1. Chỉ truy xuất các phần tử con trực tiếp

Dưới đây là một nâng cấp của ví dụ trước, thêm một cấp menu để thấy rằng sử dụng hàm children() chỉ tác động tới các phần tử con trực tiếp, trong khi đó hàm .find() có thể tìm kiếm cả các phần tử cháu.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ví dụ sự khác biệt giữa .children() và .find()</title>
    <style>
        /* CSS cho menu */
        ul {
            list-style: none;
            padding: 0;
        }
        li {
            padding: 10px;
            cursor: pointer;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            margin-bottom: 5px;
        }
        li:hover {
            background-color: #e0e0e0;
        }
        .submenu {
            display: none;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <ul id="menu">
        <li>Menu 1
            <ul class="submenu">
                <li>Submenu 1.1
                    <ul class="submenu">
                        <li>Sub-submenu 1.1.1</li>
                        <li>Sub-submenu 1.1.2</li>
                    </ul>
                </li>
                <li>Submenu 1.2
                    <ul class="submenu">
                        <li>Sub-submenu 1.2.1</li>
                        <li>Sub-submenu 1.2.2</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>Menu 2
            <ul class="submenu">
                <li>Submenu 2.1</li>
                <li>Submenu 2.2
                    <ul class="submenu">
                        <li>Sub-submenu 2.2.1</li>
                        <li>Sub-submenu 2.2.2</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>Menu 3</li>
    </ul>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // Sử dụng .children() để ẩn submenu của mục menu cha
            $('#menu').on('click', 'li', function() {
                $(this).children('.submenu').slideToggle();
            });

            // Sử dụng .find() để ẩn tất cả các submenu
            $('#hideAll').click(function() {
                $('#menu').find('.submenu').slideUp();
            });
        });
    </script>

    <button id="hideAll">Ẩn Tất Cả Submenu</button>
</body>
</html>

Giải thích:

  • Khi bạn nhấp vào một mục menu, submenu tương ứng của mục đó sẽ mở hoặc đóng.
  • Khi bạn nhấp vào nút “Ẩn Tất Cả Submenu”, tất cả các submenu sẽ bị ẩn đi. Chú ý rằng các submenu cháu không bị ẩn khi sử dụng .children().

2.2. Kết quả của hàm sẽ không bao gồm các nút văn bản

Có một điều mà bạn cần chú ý là kết quả của hàm children() sẽ không bao gồm các nút văn bản, và để bao gồm cả các nút văn bản, chúng ta cần sử dụng hàm contents():

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ví dụ về .children() và .contents()</title>
</head>
<body>
    <div id="parentDiv">
        Text Node
        <p>Paragraph</p>
        <span>Span</span>
        <a href="#">Link</a>
    </div>

    <button id="showChildren">Hiển thị .children()</button>
    <button id="showContents">Hiển thị .contents()</button>

    <div id="childrenResult"></div>
    <div id="contentsResult"></div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#showChildren').click(function() {
                var childrenResult = $('#parentDiv').children();
                displayResult('Kết quả của .children()', childrenResult);
            });

            $('#showContents').click(function() {
                var contentsResult = $('#parentDiv').contents();
                displayResult('Kết quả của .contents()', contentsResult);
            });

            function displayResult(title, result) {
                var resultDiv = $('<div></div>');
                resultDiv.append('<strong>' + title + '</strong><br>');

                result.each(function(index, element) {
                    var elementType = element.nodeType === 1 ? 'Element' : 'Text Node';
                    resultDiv.append('[' + index + '] ' + elementType + ': ' + $(element).text() + '<br>');
                });

                if (result.length === 0) {
                    resultDiv.append('Không có phần tử.');
                }

                if (title === 'Kết quả của .children()') {
                    $('#childrenResult').html(resultDiv);
                } else {
                    $('#contentsResult').html(resultDiv);
                }
            }
        });
    </script>
</body>
</html>

Giải thích:

  • Khi bạn nhấp vào nút “Hiển thị .children()” hoặc “Hiển thị .contents()”, kết quả sẽ được hiển thị trên trang HTML trong các phần tử <div> có id tương ứng là “childrenResult” và “contentsResult”.
  • Kết quả bao gồm số lượng phần tử và thông tin về mỗi phần tử, bao gồm tên đối tượng và giá trị (đối với các phần tử văn bản).

2.3. Dùng hàm children để tạo menu đơn giản

Nếu không có selector được cung cấp, hàm này sẽ trả về tất cả các phần tử con trực tiếp của các phần tử đã chọn,” chúng ta có thể xây dựng một menu giống trang web w3schools.com bằng cách sử dụng hàm children() để lấy tất cả các phần tử con trực tiếp của một phần tử menu.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu with Submenu</title>
    <style>
	body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #f0f0f0;
}

.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.menu > li {
    position: relative;
    padding: 10px 15px;
    cursor: pointer;
}

.menu > li:hover {
    background-color: #ddd;
}

.menu > li > .submenu {
    display: none;
    position: fixed;
    left: 0;
    top: 100%; /* Display below the parent */
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 20px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Adjust column width as needed */
    gap: 10px; /* Adjust gap between columns */
}

.menu > li > .submenu li {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}

.menu > li > .submenu li:last-child {
    border-bottom: none;
}

	</style>
</head>
<body>
    <div class="header">
        <img src="https://kienthuctoantap.com/wp-content/uploads/2023/09/Kien-thuc-toan-tap.png" width="40px" height="40px" alt="Logo" >
        <ul class="menu" id="menu">
            <li>HTML
                <ul class="submenu">
                    <li>HTML Introduction</li>
                    <li>HTML Editors</li>
                    <li>HTML Basic</li>
                    <li>HTML Forms</li>
                    <li>HTML5 Semantic Elements</li>
                    <li>HTML Tables</li>
                </ul>
            </li>
            <li>CSS
                <ul class="submenu">
                    <li>CSS Introduction</li>
                    <li>CSS Syntax</li>
                    <li>CSS Colors</li>
                    <li>CSS Text</li>
                    <li>CSS Fonts</li>
                    <li>CSS Layout</li>
                </ul>
            </li>
            <li>JavaScript
                <ul class="submenu">
                    <li>JavaScript Introduction</li>
                    <li>JavaScript Functions</li>
                    <li>JavaScript Events</li>
                    <li>JavaScript DOM</li>
                    <li>JavaScript AJAX</li>
                    <li>JavaScript ES6</li>
                </ul>
            </li>
        </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#menu > li').hover(
                function() {
                    var submenu = $(this).children('.submenu');
                    var parentBottom = $(this).offset().top + $(this).outerHeight();
                    var windowHeight = $(window).height();

                    // Calculate the maximum height for the submenu
                    var maxHeight = windowHeight - parentBottom - 20; // 20px padding

                    submenu.css('max-height', maxHeight + 'px');
                    submenu.css('top', parentBottom + 'px');
                    submenu.show();
                },
                function() {
                    $(this).children('.submenu').hide();
                }
            );
        });
    </script>
</body>
</html>

Giải thích:

  • Khi bạn di chuột vào một mục menu (HTML, CSS, JavaScript), submenu tương ứng sẽ xuất hiện. Điều này được thực hiện bằng cách sử dụng .children('.submenu') để chọn các submenu con trực tiếp của mục menu được di chuột vào.

Related posts