Web Cơ Bản

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

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

- Phương thức wrap() dùng để thiết lập phần tử cha cho các phần tử được chọn.

Ví dụ:

- Thiết lập <div> làm phần tử cha cho tất cả các phần tử <p>


<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").wrap("<div>");
        });
    });
</script>
Xem ví dụ

- Gợi ý: Để xóa phần tử cha của phần tử được chọn thì sử dụng phương thức unwrap()

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

- Để sử dụng phương thức wrap(), chúng ta có hai cú pháp cơ bản như sau:

- Cú pháp 1: Cú pháp này thường được sử dụng trong trường hợp bộ chọn của bạ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 được tìm thấy có chung một kiểu phần tử cha.

$(selector).wrap(wrappingElement);

- Cú pháp 2: Cú pháp này thường được sử dụng trong trường hợp bộ chọn của bạn tìm được nhiều phần tử trùng khớp và bạn muốn mỗi một phần tử sẽ có một kiểu phần tử cha riêng.

- Lưu ý: Tham số "n" trả về chỉ số của phần tử.

$(selector).wrap(function(n){
    return wrappingElement;
});

3) Một số ví dụ

Ví dụ:

- Thiết lập <span style='color:red'><u> làm phần tử cha cho tất cả các phần tử <b>


<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("b").wrap("<span style='color:red'><u>");
        });
    });
</script>
Xem ví dụ
Ví dụ:

- Thiết lập phần tử cha cho các phần tử <b> (tùy trường hợp)


<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("b").wrap(function(n){
                if(n==0){return "<u>";}
                if(n==1){return "<i>";}
                if(n==2){return "<span style='color:red'>";}
            });
        });
    });
</script>
Xem ví dụ
Ví dụ:

- Thêm và xóa phần tử cha của các phần tử <span>


<script>
    $(document).ready(function(){
        $("#add").click(function(){
            $("span").wrap("<u><i>");
        });
        $("#delete").click(function(){
            $("span").unwrap();
        });
    });
</script>
Xem ví dụ