JS - Traversing trong jQuery

06/05/2019, 2:25 PM | 12/11/2019, 4:49 PM | 847 | 048

Như vậy ta đã tìm hiểu về cách truy vấn đến các phần tử bằng cách sử dụng Selector, tìm hiểu về sự kiện - events , thuộc tính - attributes và các cách thao tác với chúng trong jQuery. Bài này sẽ tìm hiểu về nhóm Tranversing, nhóm này gồm các phương thức giúp lấy được các Selector mong muốn theo quan hệ anh em, cha mẹ .v.v.. trong cây DOM, hay kiểm tra, thêm mới phần tử vào tài liệu v.v... Để hiểu về Tranversing và mối quan hệ giữa các thành phần trong cây DOM bạn nên xem qua về DOM Nodes trong javascript. Có 3 nhóm Tranversing như sau :
1. Tranversing Filtering trong jQuery

Tên	Ý nghĩa
.eq(n)	Lấy phần tử thứ n. eq(0) là phần tử đầu tiên, eq(-1) là phần tử cuối cùng
.filter()	Giúp lọc các phần tử cần lấy trong một danh sách các kết quả trả về của selector
.first()	Lấy phần tử đầu tiên trong danh sách selector
.has()	Lọc các phần tử, tạo một đối tượng jQuery mới từ danh sách các kết quả trả về của selector
.is('bộ chọn')	Kiểm tra phần tử có phù hợp với bộ chọn hay không, trả về true nếu ít nhất một phần tử phù hợp
.last()	Lấy phần tử cuối cùng trong danh sách selector
.map(function)	Mỗi phần tử trong kết quả trả về của selector sẽ được thông qua một function, tạo ra một đối tượng jQuery mới chứa các giá trị trả về
.not(selector)	Không chọn thành phần nào phù hợp với selector truyền vào. Có thể truyền vào function thay vì selector. Ví dụ : $('li').not('.my-class').css('color', 'red') đổi màu chữ cho tất cả thẻ <li> trừ thẻ có class=my-class
.slice(n)	Chọn n thành phần từ danh sách kết quả trả về của selector. Nếu n là số âm thì tính từ dưới lên. - $('p').slice(2) Lấy 2 phần tử <p> đầu tiên trong danh sách - $('p').slice(-2) Lấy 2 phần tử <p> cuối cùng trong danh sách - $('p').slice(2,5) Lấy phần tử <p> thứ 2 đến thứ 5 trong danh sách - $('p').slice(-2, -5) Lấy phần tử <p> thứ 2 đến thứ 5 trong danh sách tính từ dưới lên

2. Nhóm Miscellaneous Traversing trong jQuery

Tên	Ý nghĩa
.add()	Thêm một phần tử mới vào phần tử đã có. Ví dụ : $('div').add('p').css('color', 'red')
.addBack([selector])	Thêm phần tử trước đó được trả về bởi selector và phần tử hiện tại được lọc bởi [selector], để cùng thực hiện hành động. Ví dụ : $('div').find('p').addBack().addClass('active'); thêm class active vào cả div và p
.andSelf()	Hàm này tương tự như addBack() nhưng không có giá trị truyền vào. Không được dùng trong phiên bản 1.8 và bị xóa từ phiên bản 3.0
.contents()	Lấy phần tử con của mỗi phần tử trong tập hợp kiết quả trả về của selector. Bao gồm cả nốt văn bản (text nodes) và nốt bình luận (comment nodes). Nếu chưa hiểu về node bạn có thể xem thêm về DOM Nodes trong javascript
.end()	Kết thúc hành động lọc gần nhất trong chuỗi, thực hiện tiếp hành động lọc tiếp theo nếu có. Ví dụ : $( "ul.first" ).find( ".foo" ).addClass( "active" ).end().find( ".bar" ).addClass( "active-1" ); end() ở tên có tác dụng sau khi thêm class active cho các phần tử có class=foo sẽ tiếp tực tìm và thêm class active-1 cho các phần tử có class=bar

3. Nhóm Tree Tranversal

Tên	Ý nghĩa
.children([selector])	Lấy các thành phần là con trực tiếp của thành phần cha. Có thể thêm bộ lọc [selector] để lấy các phần tử trong danh sách các thành phần con. children() chỉ lấy các thành phần con trực tiếp mà không lấy các thành phần cháu ... như find() children() không lấy các text nodes và comment nodes như contents()
.closest([selector])	Với mỗi phần tử trong kết quả trả về của selector, lấy phần tử đầu tiên khớp với bộ lọc [selector] bằng cách kiểm tra chính nó và các phần tử tổ tiên của nó. closest() khác với parents() ở chỗ : - closest() chỉ lấy về một kết quả phù hợp còn parents() lấy về tất cả kết quả phù hợp với bộ lọc [selector] nếu được truyền vào. - closest() bắt đầu kiểm tra chính nó và các phần tử tổ tiên trong khi parents() bắt đầu kiểm tra từ phần tử cha mà không kiểm tra chính nó. Chú ý phân biệt giữa parents() và parent().
.find([selector])	Với mỗi phần tử trong kết quả trả về của selector tìm các phần tử phù hợp với bộ lọc [selector]
.next([selector])	Lấy thành phần cùng cấp ( anh, chị em ) đứng ngay kế tiếp thành phần sử dụng next(). Nếu truyền vào [selector] thì nó chỉ lấy thành phần cùng cấp ( anh, chị em ) phù hợp với [selector].
.nextAll([selector])	Tương tự như next() nhưng lấy tất cả các thành phần đứng sau thay vì chỉ lấy 1 phần tử như next().
.nextUntil([selector])	Lấy tất cả các thành phần cùng cấp ( anh, chị em ) đứng sau thành phần sử dụng nextUntil() và chỉ dừng lại khi gặp phần tử khớp với bộ lọc [selector].
.offsetParent()	Lấy thành phần tổ tiên gần nhất có sử dụng thuộc tính position
.parent([selector])	Với mỗi phần tử trong kết quả trả về của selector, lấy phần tử cha mẹ của chúng phù hợp với bộ lọc [selector] nếu được truyền vào.
.parents([selector])	Tương tự như parent() nhưng khác là parents() lấy tất cả các phần tử cha mẹ, ông bà, tổ tiên ...
.parentsUntil([selector])	Lấy tất cả các thành phần tổ tiên của phần tử ( giống parents() ) và chỉ dừng khi gặp thành phần khớp với bộ lọc [selector].
.prev([selector])	Lấy thành phần cùng cấp ( anh, chị em ) đứng ngay kế trước thành phần sử dụng prev(). Nếu truyền vào [selector] thì nó chỉ lấy thành phần cùng cấp ( anh, chị em ) phù hợp với [selector].
.prevAll([selector]	Tương tự như prev() nhưng lấy tất cả các thành phần đứng trước thay vì chỉ lấy 1 phần tử như prev().
.prevUntil([selector])	Lấy tất cả các thành phần cùng cấp ( anh, chị em ) đứng trước thành phần sử dụng prevUntil() và chỉ dừng lại khi gặp phần tử khớp với bộ lọc [selector].
.siblings([selector])	Với mỗi phần tử trong kết quả trả về của selector, lấy các phần tử anh, chị em của chúng phù hợp với bộ lọc [selector] nếu được truyền vào. Chú ý là không lấy chính nó.

4. Một số ví dụ
is() trong jQuery
Khi click vào phần tử <li> đầu tiên thì đổi màu

 <script language="javascript">
      $(document).ready(function(){
           $('li').click(function(){
                if($(this).is(':first-child')){
                    $(this).css('color','red');
                }
           })
      });
</script>

map() trong jQuery
Với mỗi phần tử <p> trong kết quả trả về của selector, lấy nội dung text() của nó gán vào <div>. Phương thức map() sẽ trả về đối tượng jQuery chưa một mảng nên ta sử dụng get() để lấy giá trị của nó.
Xem DEMO

<script language="javascript">
      $(document).ready(function(){
           $('div').text($('p').map(function(){
              
               return $(this).text();
              
           }).get());
      });
</script>

nextUntil() trong jQuery
Đổi màu border cho tất cả các thành phần cùng cấp ( anh, chị em ) đứng sau thành phần sử dụng nextUntil() và chỉ dừng lại khi gặp phần tử có class=item-e.

Xem DEMO

<script language="javascript">
       $(document).ready(function(){
            var str = $( "li.item-a" ).nextUntil(".item-e");
            str.css( "border", "1px solid pink" );
       });
</script>

sublings() trong jQuery
đổi màu border cho các phần tử là anh chị em của phần tử <li> có class=item-b, đồng thời phải có class=item-d và class=item-e
Xem DEMO

<script language="javascript">
       $(document).ready(function(){
            var str = $( "li.item-b" ).siblings(".item-d, .item-e");
            str.css( "border", "1px solid pink" );
       });
</script>

Các ví dụ chi tiết bạn có thể tham khảo thêm tại trang chủ của jQuery.