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

Ở 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/