Question

我正在尝试使用其他div标签封装标签，其中 A 和 B 。以下是我的最终结果：

<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>');

Fiddle

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

<小时/> 我的回答有一个来自匿名downvoter的downvote，当然因为我使用了$('.C').wrap('<div class="A"/>')而且一位评论者也说它已经坏了。以下是jQuery documention的一部分：

考虑以下HTML：

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

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

$('.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时关闭，所以当开发人员实现innsertAfter方法时，你可以让jquery处理它。

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

Answer 4

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

您好像想要使用wrap()功能。

您的脚本如下所示：

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

为什么jQuery自己完成标记

4 个答案: