美文网首页
wrap()和wrapInner()方法

wrap()和wrapInner()方法

作者: 潇潇翔子 | 来源:发表于2018-09-07 14:04 被阅读1次

    wrap()和wrapInner():

    前者把所有匹配的元素用其他元素的结构化标记包裹起来;
    后者将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。
    

    看下面一个wrap()的例子:
    用原先div的内容作为新div的class,并将每一个元素包裹起来

    HTML 代码:

    <div class="container">
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
    </div>
    

    jQuery 代码:

    $('.inner').wrap(function() {
      return '<div class="' + $(this).text() + '" />';
    });
    

    结果:

    <div class="container">
      <div class="Hello">
        <div class="inner">Hello</div>
      </div>
      <div class="Goodbye">
        <div class="inner">Goodbye</div>
      </div>
    </div>
    

    接着再看下面一个wrapInner()的例子:

    用原先div的内容作为新div的class,并将每一个元素包裹起来

    HTML 代码:

    <div class="container">
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
    </div>
    

    jQuery 代码:

    
    $('.inner').wrapInner(function() {
      return '<div class="' + $(this).text() + '" />';
    });
    

    结果:

    <div class="container">
      <div class="inner">
        <div class="Hello">Hello</div>
      </div>
      <div class="inner">
        <div class="Goodbye">Goodbye</div>
      </div>
    </div>
    

    相关文章

      网友评论

          本文标题:wrap()和wrapInner()方法

          本文链接:https://www.haomeiwen.com/subject/jvlcgftx.html