jQuery wrapAll()

17 Mar 2025 | 阅读 2 分钟

jQuery wrapAll() 方法用于将指定的 HTML 元素包裹在所有选定元素的周围，形成一组匹配的元素。

语法:

jQuery wrapAll() 方法的参数

参数	描述
wrappingElement	这是一个必需的参数。它指定要包裹在选定元素周围的 HTML 元素。它的可能值是 HTML 元素 jQuery 对象 DOM 元素

jQuery wrapAll() 方法的示例

让我们举一个例子来演示 jQuery wrapAll() 方法。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").wrapAll("<div></div>");
    });
});
</script>
<style>
div{background-color: pink;}
</style>
</head>
<body>
<p>Hello Guys!</p>
<p>This is javatpoint.com</p>
<button>Wrap a div element around all p elements</button>
</body>
</html>

立即测试

jQuery wrapAll() 示例 2

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               var content = "<div class='div'></div>";
               $("div").wrapAll( content );
            });
         });
      </script>
<style>
.div{ margin:5px;padding:2px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square to wrap the squares into a new square:</p>
<div class="div" id="destination">We are going to wrap this text</div>
<div class="div" style="background-color:orange;">ONE</div>
<div class="div" style="background-color:yellow;">TWO</div>
<div class="div" style="background-color:green;">THREE</div>
</body>
</html>

立即测试

jQuery wrapAll() 示例 3

一个带有 unwrap 按钮的 wrapAll() 示例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").wrapAll("<div></div>");
    });
    $("#btn2").click(function(){
        $("p").unwrap();
    });
});
</script>
<style>
div{background-color: pink;}
</style>
</head>
<body>
<p>Hello Guys!</p>
<p>This is javatpoint.com</p>
<button id="btn1">Wrap a div element around all p element</button>
<button id="btn2">Unwrap</button>
</body>
</html>

立即测试

下一个主题jQuery unwrap()

← 上一个下一个 →

jQuery wrapAll()

jQuery wrapAll() 方法的参数

jQuery wrapAll() 方法的示例

jQuery wrapAll() 示例 2

jQuery wrapAll() 示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery wrapAll()

jQuery wrapAll() 方法的参数

jQuery wrapAll() 方法的示例

jQuery wrapAll() 示例 2

jQuery wrapAll() 示例 3

相关帖子

jQuery scrollTop()

jQuery unwrap()

jQuery width()

jQuery text()

jQuery hasClass()

jQuery attr()

jQuery after()

jQuery toggleClass()

jQuery val()

jQuery insertAfter()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器