zoukankan      html  css  js  c++  java
  • jQuery_DOM学习之------包裹元素的方法

    1、.wrap( )在集合中匹配的每个元素周围包裹一个HTML结构

    简单的看一段代码:

    <span>连接文字</span>

    给span元素增加一个a包裹

    $('span').wrap('<a href="http://soulsjie.com"></a>')

    最后的结构,p元素增加了一个父div的结构


    <a href="http://soulsjie.com"><span>连接文字</span></a>

    2、DOM包裹unwrap()方法

    要使用.remove()来删除选中元素的父元素是比较复杂的此时unwrap()可以将被选中的元素的父元素删除

    使用:

     //找到所有p元素,删除父容器div
            $('p').unwrap('<div></div>')

    3、DOM包裹wrapAll()方法

    .wrap( )是针对单个元素进行包裹,当要包裹几个元素的时候需要用wrapall()

    如:

    想要包裹下面的p标签在一个div内:

    <p>内容1</p>

    <p>内容2</p>

    //1.直接加参数,进行包裹

    $('p').wrapAll('<div></div>')

    //2.根据函数的返回值包裹内容

    $('p').wrapAll(function() {
        return '<div><div/>'; 
    })

    包裹后的结构如下:

    <div>
        <p>内容1</p>
        <p>内容2</p>
    </div>

    4、DOM包裹wrapInner()方法

    如果要将合集中的元素内部所有的子元素用其他元素包裹起来,并当作指定元素的子元素,针对这样的处理,JQuery提供了一个wrapInner方法

    原本结构:

    <div>内容1</div>
    <div>内容2</div>

    给div内容包裹上p元素

    $('div').wrapInner('<p></p>')

    最后的结构,匹配的div的内容被p给包裹了

    <div>
        <p>内容1</p>
    </div>
    <div>
        <p>内容2</p>
    </div>


  • 相关阅读:
    VBA基础一:对象、属性、方法、变量
    js画吊线图
    C++读取硬盘物理序列号-非管理员权限
    什么是句柄?
    2020年WIN7系统的几个问题处理
    静态分析:IDA逆向代码段说明 text、idata、rdata、data
    入门级汇编语法句读
    Ollydbg 单步跟踪F8
    IDA使用之旅(四)
    CSP认证201409-1-相邻数对-(Java)100分
  • 原文地址:https://www.cnblogs.com/soulsjie/p/7803450.html
Copyright © 2011-2022 走看看