jquery - 为什么jQuery会自己完成标签

Question

我正在尝试将标签与其他具有A和B类的 div 标签封装在一起。这是我的最终结果应该是这样的：

<div class="A">
    <div class="B">
      **<div class="C"></div>**
    </div>
</div>

我正在使用以下代码来做到这一点：

<script>
    jQuery('<div class="A"><div class="B">').insertBefore('.C');
    jQuery('</div></div>').insertAfter('.C');
            </script>

但是，代码如下：

<div class="A">
  <div class="B">
  </div>
</div>
<div class="C">
</div>

这显然不是我的本意。请帮忙。

Answer 1

wrap是您需要的功能，因为您想在现有标签周围包装两个标签，而不是在它之前或之后插入新标签：div

$('.C').wrap('<div class="A"><div class="B"></div></div>');

Answer 2

您可以使用以下wrap()方法：

围绕匹配元素集中的每个元素包裹一个 HTML 结构。

$('.C').wrap('<div class="A"><div class="B"></div></div>');

小提琴

_{注意jQuery('</div></div>').insertAfter('.C');不生成html标签。}

---

我的回答得到了一位匿名反对者的反对，这肯定是因为我曾经使用过$('.C').wrap('<div class="A"/>')，而一位评论者也说它已经坏了。这是部分jQuery documention：

考虑以下 HTML：

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

使用，我们可以在内部元素.wrap()周围插入一个 HTML 结构，如下所示：<div>

$('.inner').wrap('<div class="new" />');

新<div>元素是动态创建并添加到 DOM 中的。结果是<div>每个匹配元素的新包装：

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

Answer 3

你的电话不正确

应该

<div class="C">Some Text</div>

<script type="text/javascript">
  $(function(){
     $(".C").wrap($("<div class='A' />")).wrap($("<div class='B' />"));​
  });
</script>

您没有在第一次调用 A 类 div 时关闭，因此您留给 jquery 处理它，因为开发人员实现了 innsertAfter 方法。

工作示例http://jsfiddle.net/mjaric/kZSTu/1

Answer 4

它可能不是 jQuery，而是呈现它的浏览器。我已经看到 Chrome 的检查器渲染结束标记，我在原始标记中忘记了它们。

看起来您实际上想要使用该wrap()功能。

您的脚本如下所示：

$('.C').wrap(function () {
  return '<div class="A"><div class="B">';
});