jQuery duyệt qua - phương thức map()

jQuery Traversing Reference Manual

Mô hình

Xây dựng danh sách tất cả các giá trị trong biểu mẫu:

$("p").append($("input").map(function(){}
  return $(this).val();
).get().join(", ") );

Thử nghiệm ngay

Định nghĩa và cách sử dụng

map() chuyển từng phần tử qua hàm hiện tại của tập hợp khớp, tạo ra một đối tượng jQuery mới chứa giá trị trả về.

Ngữ pháp

.map(callback(index,domElement))
Parameter Mô tả
callback(index,domElement) Hàm đối tượng được gọi cho mỗi phần tử trong tập hợp hiện tại.

Mô tả chi tiết

Do giá trị trả về là mảng được bao bọc bởi jQuery, việc sử dụng get() để xử lý đối tượng trả về để lấy mảng cơ bản.

.map() phương pháp rất hữu ích cho việc nhận hoặc đặt giá trị của tập hợp phần tử. Hãy suy nghĩ về biểu mẫu có một loạt các ô kiểm tra sau:

<form method="post" action="">
  <fieldset>
    <div>
      <label for="two">2</label>
      <input type="checkbox" value="2" id="two" name="number[]">
    </div>
    <div>
      <label for="four">4</label>
      <input type="checkbox" value="4" id="four" name="number[]">
    </div>
    <div>
      <label for="six">6</label>
      <input type="checkbox" value="6" id="six" name="number[]">
    </div>
    <div>
      <label for="eight">8</label>
      <input type="checkbox" value="8" id="eight" name="number[]">
    </div>
  </fieldset>
</form>

Chúng ta có thể nhận được danh sách các ID của các ô kiểm tra được phân tách bằng dấu phẩy:

$(':checkbox').map(function() {
  return this.id;
).get().join(',');

Thử nghiệm ngay

Kết quả của lần gọi này là chuỗi: "two,four,six,eight".

Trong hàm callback, this tham chiếu đến phần tử DOM hiện tại của mỗi lần lặp. Hàm này có thể trả về một phần tử dữ liệu đơn lẻ hoặc một mảng các phần tử dữ liệu cần được chèn vào kết quả tập hợp. Nếu trả về một mảng, các phần tử trong mảng sẽ được chèn vào tập hợp. Nếu hàm trả về null hoặc undefined, sẽ không chèn bất kỳ phần tử nào.

jQuery Traversing Reference Manual