/Hàm addBack trong JQuery API
Các hàm built-in15/10/2023

Hàm addBack trong JQuery API

Hàm addBack 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 để thêm các phần tử từ tập hợp trước đó vào tập hợp hiện tại, tùy chọn có thể được lọc bằng một bộ chọn (selector).

1. Cú pháp hàm addBack

Thêm các phần tử từ tập hợp trước đó vào tập hợp hiện tại, có thể lọc bằng một bộ chọn (selector).

Cú pháp:

.addBack([selector])

Tham số:

  • selector (tùy chọn): Một chuỗi chứa một biểu thức bộ chọn để so khớp với tập hợp hiện tại của các phần tử.

Kết quả trả về:

  • Một đối tượng jQuery chứa các phần tử ban đầu và các phần tử được thêm vào (phụ thuộc vào tập hợp trước đó và lọc bằng bộ chọn nếu có).

Phiên bản hỗ trợ:

  • Được giới thiệu trong phiên bản jQuery 1.8.
Hàm addBack trong JQuery API

2. Một số ví dụ hàm addBack

2.1. Thêm phần tử được chọn vào tập hợp hiện tại

Dưới đây là một ví dụ tương tự cho hàm addBack:

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Ví dụ - Sử dụng addBack()</title>
</head>
<body>
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
  </ul>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      // Lấy phần tử thứ 3
	  var $thirdItem = $( "li" ).eq(2);

      // Từ phần tử thứ 4 trở đi bôi màu đỏ
      $thirdItem.nextAll()
        .css( "background-color", "red" );
		
	  // Từ phần tử thứ 3 trở đi và chính nó được thêm bởi addBack tô đậm
      $thirdItem.nextAll().addBack()
        .css( "font-weight", "bold" );
    });
  </script>
</body>
</html>

Mục đích của ví dụ này là sử dụng jQuery để chọn phần tử thứ 3 trong danh sách và thao tác với các phần tử từ phần tử thứ 4 trở đi.

Sau đó, sử dụng addBack() để thêm phần tử thứ 3 vào tập hợp đã chọn và làm nổi bật chúng bằng cách đặt font-weight là bold.

2.2. Thêm phần tử được chọn vào tập hợp với bộ chọn

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Ví dụ - Kết hợp addBack()</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      // Ví dụ 2: Thêm phần tử được chọn và phần tử sau vào tập hợp
      $("li:eq(1)").next().addBack().css('font-weight', 'bold');

      // Ví dụ 3: Thêm phần tử được chọn và phần tử sau vào tập hợp với bộ chọn
      $("li:eq(1)").nextAll().addBack().css('color', 'blue');
    });
  </script>
</body>
</html>

Giải thích:

  • Chọn phần tử thứ 2 và sử dụng .next().addBack() để thêm phần tử này và phần tử liền sau vào tập hợp.
  • Đặt font-weight là bold cho các phần tử đã chọn.
  • Chọn phần tử thứ 2 và sử dụng .nextAll().addBack() để thêm phần tử này và các phần tử sau vào tập hợp.
  • Đặt màu chữ là màu xanh cho các phần tử đã chọn và phần tử sau nó.

Related posts