RSSJquery

jQuery: Phương pháp di chuyển trong DOM

Hầu như các selector của jQuery cung cấp đã giúp chúng ta có thể chọn và thao tác với các phần tử DOM một các dễ dàng. Tuy nhiên jQuery còn cung cấp cho chúng ta thêm những phương thức để di chuyển lên, xuống và quanh cây DOM.

Hầu như các selector của jQuery cung cấp đã giúp chúng ta có thể chọn và thao tác với các phần tử DOM một các dễ dàng. Tuy nhiên jQuery còn cung cấp cho chúng ta thêm những phương thức để di chuyển lên, xuống và quanh cây DOM. Một số phương pháp mà jQuery giới thiệu được chuyển sang từ các selector riêng của jQuery

1, .add()

jQuery sử dụng phương thức này để thêm vào các selector giúp chúng ta bổ sung các phần tử để thao tác

<div>Selector được chọn lần đầu</div>
<p>Selector được thêm vào với phương thức .add()</p>
$("div").css({color:"white"})
.add("p").css({background:"green"});

Ở dòng code đầu tiên chúng ta sẽ sử dụng selector để chọn thành phần div. Dòng thứ 2 chúng ta sử dụng thương thức .add() để thêm vào bộ selector mới và thao tác với thành phần p, trong khi đó nếu với cách viết thông thường bạn phải tạo 2 selector riêng như sau:

$("div").css({color:"green"});
$("p").css({color:"red"});

Demo và thực hành

2, .filter()

Phương thức này cho phép lọc các phần tử phù hợp với bộ chọn để áp dụng các tác vụ. Đặc biệt .fillter() cho phép nhận một hàm làm tham số của nó.

Chúng ta cùng làm lại ví dụ chọn phần tử chẵn / lẻ như sau:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
$("ul li:odd").css({ color : "red" });

Kết quả là phần tử li Item 2 và Item 4 được hiển thị với màu đỏ

Chúng ta có thể viết lại với phương pháp .filter() như sau

$("ul li").filter(":odd").css({ color : "red" });

Chúng ta có thể hiểu như sau: tìm tất cả các phần tử li là con của ul, sau đó lọc và giữ lại các phần tử li có chỉ số lẻ để thao tác.

Cách viết sau cũng cho một kết quả tương tự, nhưng chỉ khác là .filter() nhận một hàm làm tham số của nó, trong hàm này ta sẽ xử lý để trả về các chỉ số lẻ của các phần tử.

$('ul li').filter(function(index) {
    return index % 2 != 0;  //trả về các chỉ số lẻ
}).css(color, 'red');

Demo và thực hành

3, .find()

Phương thức .find() cho chúng ta cách nhìn rõ ràng hơn về cách chọn các phần tử trong DOM của jQuery

Với yêu cầu của ví dụ trên cũng ta cũng có thể làm như sau:

$("ul").find("li:odd").css(color, "red");

Chúng ta nhận thấy rằng, cách chọn phần tử của jQuery ở đây rất rõ ràng đó là: chọn phần tử ul, sau đó tìm (find) các phần tử li có chỉ số lẻ và hiển thị với màu đỏ

Demo và thực hành

4, .andSelf(), .parent(), .children(), .next(), .nextAll(), .prev(), .prevAll(), .siblings()

Các phương thức này giúp chúng ta di chuyển xung quang DOM một cách hiệu quả với selector đã khởi tạo.

  • parent() : Di chuyển lên một cấp về thành phần cha
  • children() : Chọn tất cả các phần tử con
  • andSelf() : Bao gồm cả phần tự hiện tại (Đang chọn)
  • next() : Di chuyển đến phần tử phía sau cùng cấp
  • nexAll() : Di chuyển đến tất cả các phần tử phía sau cùng cấp
  • prev() : Di chuyển đến phần tử phía trước cùng cấp
  • prevAll(): Di chuyển đến tất cả các phần tử phía trước cùng cấp
  • siblings() : Chọn tất cả các phần tử cùng cấp

Chúng ta cùng xem xét ví dụ sau:

<table style="border: 1px solid #cfcfcf">
     <tr>
          <td>TD #1</td>
          <td>TD #2</td>
          <td>TD #3</td>
          <td>TD #4</td>
          <td>TD #5</td>
     </tr>
     <tr>
          <td>TD #6</td>
          <td>TD #7</td>
          <td>TD #8</td>
          <td>TD #9</td>
          <td>TD #10</td>
    </tr>
    <tr>
          <td>TD #11</td>
          <td>TD #12</td>
          <td>TD #13 (Index 12)</td>
          <td>TD #14</td>
          <td>TD #15</td>
    </tr>
    <tr>
          <td>TD #16</td>
          <td>TD #17</td>
          <td>TD #18</td>
          <td>TD #19</td>
          <td>TD #20</td>
    </tr>
</table>

Trước tiên bạn phải định nghĩa CSS với một class .selected như sau:

td.selected { background: green; color: white }

Tiếp theo, chúng ta sử dụng :eq() selector để thao tác với ô TD #13 (Có index 11)

$('td:eq(12)').addClass("selected");

Jquery di chuyển trong DOM

Làm sao để chọn được ô TD #14 dựa vào selector đã tạo trên? chúng ta thêm vào phương thức .next() để di tới ô kế tiếp:

$('td:eq(12)').next().addClass("selected");

jQuery: Phương pháp di chuyển trong DOM

Làm sao để ô TD #13 cũng được tác động? ta thêm vao .andSelf() để thao tác với phần tử hiện tại:

$('td:eq(12)').next().andSelf().addClass("selected");

jQuery: Phương pháp di chuyển trong DOM

Tương tự bạn có thể sử dụng:

.nextAll() để chọn ô #14 và #15

.prev() để chọn ô #12

.prevAll() để chọn ô #12 và #13

.siblings() để chọn các ô trên cùng một cấp DOM bao gồm: #11, #12, #14, #15

Hoặc bạn cũng có thể chọn các ô #11, #12,  #13, #14, #15 bằng cách kết hợp .parent().children() như sau:

$('td:eq(12)').parent().children().addClass("selected");

jQuery di chuyển trong DOM

Đầu tiên chúng ta sử dụng .parent() để di chuyển lên một cấp về thành phần cha của nó là tr, sau đó chúng ta sử dụng .children() để chọn các thành phần con của tr là các thành phần td từ #11 đến #15

Demo và thực hành

KẾT LUẬN

Trên đây là một số phương pháp để thao tác và di chuyển trong DOM, Bạn có thể tìm hiểu thêm các phương thức di chuyển trong DOM tại đây:

http://api.jquery.com/category/traversing/

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu