单击时创建新div以包装旧div

Question

例如，当点击时，现有的div为<div class="two">TWO</div>，添加一个名为.one的新div并将.two包裹起来<div class="one"><div class="two">TWO</div></div>，有什么建议吗？我试过包装和前置。

$(".two").click(function(){
  
  
  $(".one").wrap(this);
});

.one{
  padding:10px;
  background-color:#ff0;
  }

<div class="two">TWO</div>

Answer 1

你非常接近，只是逻辑略有偏离。你需要从'two'而不是'one'调用wrap（传递给方法的HTML）：

$(".two").click(function() {
  $(this).wrap("<div class='one'></div>");
});

.one {
  padding: 10px;
  background-color: #ff0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="two">TWO</div>

Answer 2

$(this).wrap( "<div class='one'></div>" );  

Answer 3

如果您已经在页面上已经拥有类one的div，请执行以下操作：

$(".two").click(function(){
  $(this).wrap(".one");
});

否则，你可以这样做：

$('.two').click(function(){
  $(this).wrap('<div class="one"></div>');
});

Here是jQuery .wrap()函数的指南。它接受Selector，htmlString，Element或jQuery作为参数。它还可以将函数作为返回htmlString或jQuery的参数;但是可以引用它所包裹的元素。