Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Học jquery cơ bản nâng cao p9 Jquery Parents, Children, Siblings

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi vnfit.com, 6/3/15.

Lượt xem: 3,985

  1. vnfit.com Banned

    Ở bài trước chúng ta đã cùng tìm hiểu về “jquery object” trong loạt bài về “học jquery từ cơ bản đến nâng cao” này mình xin hướng dẫn các bạn về jquery parents, jquery children, jquery sibling (anh em).

    Jquery Parents
    Sử dụng những hàm ở đây cho phép tìm cha của thẻ được chọn .parent(), .parents(), .parentsUntil(), và .closest(). xem ví dụ dưới đây:

    <div class="grandparent">
    <div class="parent">
    <div class="child">
    <span class="subchild"></span>
    </div>
    </div>
    <div class="surrogateParent1"></div>
    <div class="surrogateParent2"></div>
    </div>

    // Selecting an element's direct parent:

    // returns [ div.child ]
    $( "span.subchild" ).parent();

    // Selecting all the parents of an element that match a given selector:

    // returns [ div.parent ]
    $( "span.subchild" ).parents( "div.parent" );

    // returns [ div.child, div.parent, div.grandparent ]
    $( "span.subchild" ).parents();

    // Selecting all the parents of an element up to, but *not including* the selector:

    // returns [ div.child, div.parent ]
    $( "span.subchild" ).parentsUntil( "div.grandparent" );

    // Selecting the closest parent, note that only one parent will be selected
    // and that the initial element itself is included in the search:

    // returns [ div.child ]
    $( "span.subchild" ).closest( "div" );

    // returns [ div.child ] as the selector is also included in the search:
    $( "div.child" ).closest( "div" );
    Jquery Children
    Hàm .children() và .find() cho phép tìm kiếm thẻ con của thẻ dược chọn. .children() chỉ làm việc với con trực tiếp của nó, trong khi .find() có thể gọi đệ quy để tìm tất cả các thẻ con phù hợp. Xem ví dụ dưới đây để có thể hiểu hơn:

    // Selecting an element's direct children:

    // returns [ div.parent, div.surrogateParent1, div.surrogateParent2 ]
    $( "div.grandparent" ).children( "div" );

    // Finding all elements within a selection that match the selector:

    // returns [ div.child, div.parent, div.surrogateParent1, div.surrogateParent2 ]
    $( "div.grandparent" ).find( "div" );
    Jquery Siblings (anh chị em)
    Ở đó có một vài hàm cơ bản giúp bạn có thể trực tiếp hoặc gián tiếp tìm được các thẻ anh chị em của một thẻ được lựa chọn. Bạn có thể tìm thẻ đằng trước nó với .prev(), và thẻ tiếp sau nó với .next(), và cả trước và sau với .siblings(). Thêm một số hàm được xây dựng lên từ hàm cơ bản đó là: .nextAll(), .nextUntil(), .prevAll() và .prevUntil().

    // Selecting a next sibling of the selectors:

    // returns [ div.surrogateParent1 ]
    $( "div.parent" ).next();

    // Selecting a prev sibling of the selectors:

    // returns [] as No sibling exists before div.parent
    $( "div.parent" ).prev();

    // Selecting all the next siblings of the selector:

    // returns [ div.surrogateParent1, div.surrogateParent2 ]
    $( "div.parent" ).nextAll();

    // returns [ div.surrogateParent1 ]
    $( "div.parent" ).nextAll().first();

    // returns [ div.surrogateParent2 ]
    $( "div.parent" ).nextAll().last();

    // Selecting all the previous siblings of the selector:

    // returns [ div.surrogateParent1, div.parent ]
    $( "div.surrogateParent2" ).prevAll();

    // returns [ div.surrogateParent1 ]
    $( "div.surrogateParent2" ).prevAll().first();

    // returns [ div.parent ]
    $( "div.surrogateParent2" ).prevAll().last();

    Sử dụng .siblings() để chọn tất cả các anh chị em liền kề với thẻ đó:
    // Selecting an element's siblings in both directions that matches the given selector:

    // returns [ div.surrogateParent1, div.surrogateParent2 ]
    $( "div.parent" ).siblings();

    // returns [ div.parent, div.surrogateParent2 ]
    $( "div.surrogateParent1" ).siblings();
    Bạn có thể tìm nhiều hơn các phương thức khác tại đây: Traversal documentation on api.jquery.com.

    Cảm ơn các bạn đã đọc nếu thấy hay nhớ chia sẻ với những người khác nhé!
    - Nguồn: http://vnfit.com/hoc-jquery-co-ban-nang-cao-p9-jquery-parents-children-siblings/

    ...
    Phạm Hữu DưKuHit thích bài viết này.
Từ khóa:

Ủng hộ diễn đàn