Question

使用jQuery，我尝试将每个button元素的HTML包装成div。

的jQuery

$('button').each(function(){
    var markup = $(this).html();
    console.log(markup);


    //This doesn't work
    //markup.each(function(){
    //  $(this).wrap('<div></div');
    //})

    //This doesn't work either
    //markup.wrap('<div></div>');
});

我得到TypeError: markup.wrap is not a function最后一次没有工作的尝试和类似于第一次的

我的最终目标是：在div

中包装每个按钮的内容（它也可以包含JSFiddle中显示的标签）

有什么想法吗？

Answer 1

您无需迭代.each() $("button")已经是您所有"button"元素的集合。

将选择器包装到另一个元素中：

http://api.jquery.com/wrap/

$("button").wrap("<div />");

div{
  background: #0FF1CE;
  padding: 10px;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Button 1</button>
<button>Button 2</button>

将元素的内容包装到另一个元素中：

如果要将元素包含的所有内容包装到另一个元素中，请使用：
http://api.jquery.com/wrapinner/

^{对于通知，在<button> http://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element中使用块级元素是不正确的HTML标记→所以让我们在这个示例中使用<span> ：}

$("button").wrapInner("<span />");

span{
  background: #0FF1CE;
  color:      #EFFEC7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button><i>Button</i> <b>1</b></button>
<button><i>Button</i> <b>2</b></button>

Answer 2

你可以简单地使用wrapInner：

    $(this).wrapInner( "<div></div>" );

的jsfiddle： http://jsfiddle.net/hzj643tt/

Answer 3

如果正确解释问题，请尝试使用.html()

$("button").html(function(index, html) {
  return "<div>" + html + "</div>"
})

如何在div中包含按钮的HTML？

3 个答案:

将选择器包装到另一个元素中：

将元素的内容包装到另一个元素中：