Web Cơ Bản

Phương thức after() trong jQuery

1) Phương thức after() trong jQuery

- Phương thức after() dùng để thêm "một nội dung gì đó" vào phía sau phần tử được chọn.

- Lưu ý: Thông thường thì "nội dung" ở đây có thể là văn bản hoặc là phần tử HTML.

- Gợi ý: Để thêm nội dung vào phía trước phần tử được chọn thì ta dùng phương thức before()

2) Cách sử dụng phương thức after() trong jQuery

- Đối với phương thức after(), chúng ta có hai trường hợp sử dụng tương ứng với hai loại cú pháp:

Cú pháp 1:

- Cú pháp này thường được sử dụng trong trường hợp bộ chọn chỉ tìm được một phần tử trùng khớp hoặc bạn muốn tất cả các phần tử trùng khớp đều được thiết lập chung một giá trị.

$(selector).after(content);

- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong cú pháp trên:

content - Nội dung mà bạn muốn thêm vào phía sau phần tử được chọn, nó có thể là văn bản hoặc là phần tử HTML.

Cú pháp 2:

- Cú pháp này thường được sử dụng trong trường hợp bộ chọn tìm được nhiều phần tử trùng khớp và bạn muốn mỗi phần tử trùng khớp được thiết lập một giá trị riêng.

$(selector).after(function(index){
    return content;
});

- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong cú pháp trên:

function(index)
{
    return content;
}

- Chỉ định một hàm trả về nội dung mà bạn muốn thêm vào phía sau phần tử được chọn.

- Trong đó:

  • Tham số "index" trả về chỉ số của phần tử được chọn trong danh sách các phần tử trùng khớp được tìm thấy.
  • Giá trị "content" là nội dung mà bạn muốn thêm vào phía sau phần tử được chọn.

3) Một số ví dụ

Ví dụ:

- Thêm <i><u>Hello JavaScript</u></i> vào phía sau các phần tử <p>


<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").after("<i><u>Hello JavaScript</u></i>");
        });
    });
</script>
Xem ví dụ
Ví dụ:

- Thêm nội dung (tùy trường hợp) vào phía sau các phần tử <p>


<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").after(function(n){
                if(n==0){return "<h1>Lập Trình Web</h1>";}
                if(n==1){return "<h2>Hello jQuery</h2>";}
                if(n==2){return "<u>Tài liệu học</u>";}
            });
        });
    });
</script>
Xem ví dụ

4) Điểm giống và khác giữa after() và insertAfter()

- Dưới đây là bảng mô tả điểm giống và khác giữa phương thức after() và insertAfter():

after() insertAfter()
Điểm giống - Cả hai phương thức này đều được dùng để thêm nội dung nằm ở vị trí ngay phía sau phần tử được chọn.
Điểm khác - Nội dung mà bạn muốn thêm không bắt buộc phải là phần tử. - Nội dung mà bạn muốn thêm phải là phần tử (tức là bắt đầu bằng thẻ và kết thúc bởi thẻ)
- Bộ chọn được đặt ở phía trước. - Bộ chọn được đặt ở phía sau.