`

Difference between jQuery wrap and wrapAll

 
阅读更多

Notice the difference in the descriptions:

.wrap(): Wrap an HTML structure around each element in the set of matched elements. 
.wrapAll(): Wrap an HTML structure around all elements in the set of matched elements.
.wrap() wraps every element individually, but .wrapAll() wraps all of them as a group.

 For example:

<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>

 With $('.foo').wrap('<div class="bar" />');, this happens:

<div class="bar"><div class="foo"></div></div>
<div class="bar"><div class="foo"></div></div>
<div class="bar"><div class="foo"></div></div>

 But with $('.foo').wrapAll('<div class="bar" />');, this happens:

<div class="bar">
  <div class="foo"></div>
  <div class="foo"></div>
  <div class="foo"></div>
</div>

 from :http://stackoverflow.com/questions/11946379/difference-between-jquery-wrap-and-wrapall

 learn wrapInner:  http://api.jquery.com/wrapInner/

 

 

分享到:
评论

相关推荐

    wrap&wrapAll;&wrapInner;.html

    [蛋白·蛋黄】创意写法wrap&wrapAll;&wrapInner;方法应用

    浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异

    今晚看书的时候发现jQuery有三个包裹节点的方法,百度了一下jQuery wrap() / wrapAll() / wrapInner(),果然搜索结果 W3School的文档说明是排第一的。 可是,W3School的解释是这样的: jQuery 文档操作 – wrap() ...

    jQuery中wrapAll()方法用法实例

    在深入理解`wrapAll()`方法之前,我们先简单回顾一下jQuery的基础知识。 jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务,使得开发者能够更高效地操纵网页。`wrapAll...

    用法jQuery中的wrap()函数操作HTML元素的教程_.docx

    **jQuery中的wrap()函数详解** 在jQuery库中,`wrap()`函数是一个强大的工具,它允许开发者将HTML元素包裹在一个新的容器元素中。这个功能在构建动态网页和处理DOM元素时非常有用,尤其在布局调整、内容封装以及...

    jquery包裹节点

    在jQuery库中,"包裹节点"(Wrap Nodes)是一个常用的操作,它允许开发者将一个或多个HTML元素包裹在一个新的DOM结构内,以便更好地控制页面布局、应用样式或者组织交互。这个功能提供了强大的灵活性,使我们可以...

    jQuery 1.4.1 中文参考

    - `wrap()`、`unwrap()`、`wrapAll()`、`wrapInner()`:元素的包裹和解包裹。 - `replaceWith()`、`replaceAll()`:元素替换。 - `empty()`、`remove()`、`detach()`:元素的删除和分离。 **CSS操作** - `css()`:...

    jQuery 1.5 API 中文版

    $.wrapAll(wrappingElement ), .wrapAll( fn ) $.wrapInner( wrappingElement ), .wrapInner( fn ) Replacing $.replaceWith( content ), .replaceWith( fn ) $.replaceAll( selector ) Removing $.detach( ...

    JQuery新版中文手册

    JQuery开发手册 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc]) jQuery(callback) jQuery.holdReady(hold)1.6+ jQuery 对象访问 each(callback) size() length selector context get...

    jQuery 文档操作方法

    jQuery 文档操作方法详解 jQuery 文档操作方法是 jQuery 库中的一组强大且实用的函数,用于操作 HTML 和 XML 文档中的元素。这些方法可以帮助开发者快速高效地操作文档结构,提高开发效率和代码质量。本文将对 ...

    轻松掌握jQuery中wrap()与unwrap()函数的用法

    总结来说,`wrap()`、`wrapAll()`、`wrapInner()`和`unwrap()`是jQuery中用于处理元素包裹和解包的强大工具,它们帮助开发者更方便地构建和调整DOM结构。理解并熟练运用这些函数,能够极大地提升前端开发的效率。

    锋利的jquery第三章例子

    "6-元素包裹.html"则展示了如何使用`.wrap()`、`.wrapAll()`和`.wrapInner()`方法将元素包裹在其他HTML结构中,这在布局和样式调整中非常实用。 通过对这些文件的分析,我们可以看出jQuery的强大之处在于其简洁的...

    Jquery学习笔记分享

    5. **包裹节点**:`wrap()`, `wrapAll()`, `wrapInner()`可以将元素包裹在其他元素内。 6. **属性操作**:`attr()`用于获取、设置或删除元素的属性。 7. **样式操作**:`css()`方法用于获取、设置或设置一组CSS...

    JQuery总结内容

    JQuery 是一个广泛使用的 JavaScript 库,它极大地简化了网页中的 DOM 操作、事件处理、动画效果以及Ajax交互。以下是对标题和描述中所提及的jQuery知识点的详细说明: 1. **jQuery对象**:jQuery对象是由DOM元素...

    jQuery插入节点1

    jQuery 提供了 `wrap()`、`wrapAll()` 和 `wrapInner()` 三个方法来包裹节点。 * `wrap()` 方法将指定节点用其他标记包裹起来,该方法对于需要在文档中插入额外的结构化标记非常有用。 * `wrapAll()` 方法将所有...

    jQuery详细教程

    jQuery详细教程,讲解很透彻, 一. jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素。 $("#test").hide() 演示 jQuery hide() 函数,隐藏 id="test" 的元素。 $("p").hide() ...

    jquerymobile经验小结

    $(elem.get(0)).children().wrapAll("&lt;div data-iscroll='scroller'&gt;&lt;/div&gt;"); } var iscroll = new iScroll(elem.get(0), { hScroll: false, // 水平不滚动 vScroll: true, // 垂直滚动 hScrollbar: false, /...

    jquery 选择器 描述

    在深入探讨jQuery选择器及其应用之前,我们先简要回顾一下jQuery是什么。jQuery是一个快速、简洁的JavaScript库,它的设计宗旨是“写得更少,做得更多”。它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互,...

    详解jQuery中的DOM操作

    最后,jQuery提供`wrap()`、`wrapAll()`和`wrapInner()`来包裹元素。`wrap()`包裹单个元素,`wrapAll()`用于一组元素,`wrapInner()`则将元素的子内容包裹起来。 总的来说,jQuery的DOM操作极大地简化了JavaScript...

Global site tag (gtag.js) - Google Analytics