wrap()和wrapInner()方法

2018-09-07  本文已影响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>
上一篇下一篇

猜你喜欢

热点阅读