.map()

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

  • .map(): Qua mỗi phần tử được chọn, thông qua một function tạo ra một jquery object có chứa các giá trị trả lại.

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.0

.map(function(){...})

$('input').map(function(){return this id});

.map(Mục tiêu)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p').append($('input').map(function(){
         return this.id;
    }).get().join(", "));
});
</script>
</head>

<body>
<p>Value: </p>
<input type="text" id="text01" />
<input type="text" id="text02" />
<input type="text" id="text03" />
<input type="text" id="text04" />
</body>
</html>

Hiển thị trình duyệt:

Cách sử dụng .map() như trên, ta đã trả lại các giá trị id của input, sau đó lấy các giá trị này thông qua phương thức .get(), kết nối các giá trị này thông qua phương thức .join().

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<div class="test">Thành phần div</div>

<div class="test">Thành phần div
<p>Thành phần p</p>
</div>

Ví dụ thêm

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
    border: 1px solid #333;
    float: left;
    width: 40px;
}
.first { height: 50px; }
.second { height: 100px; }
.third { height: 70px; }
</style>
<script>
$(function(){
    $.fn.equalizeHeights = function() {
        var maxHeight = this.map(function(i,e) {
            return $(e).height();
        }).get();
        return this.height( Math.max.apply(this, maxHeight) );
    };
    $('button').click(function(){
        $("div").equalizeHeights();
    });
});
</script>
</head>

<body>
<button>Fix Height</button>
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</body>
</html>

Hiển thị trình duyệt:

Click vào button để xem kết quả.

.load()

.mousedown()