Reputation: 3153
Using jQuery, I tried to wrap each button
element's HTML into a 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>');
});
I get TypeError: markup.wrap is not a function
for the last not-working attempt and something similar to the 1st
My final goal is: wrap each button's content (it can include tags within too as shown in the JSFiddle) in a div
Any ideas?
Upvotes: 2
Views: 2479
Reputation: 206699
You don't need to iterate over .each()
.
$("button")
is already a collection of all your "button"
elements.
$("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>
If you want to wrap everything an element has, into another element, use:
http://api.jquery.com/wrapinner/
For your notice, it's incorrect HTML markup to use block level elements inside a <button>
http://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element → so let's use <span>
in this example:
$("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>
Upvotes: 5
Reputation: 1
If interpret Question correctly, try using .html()
$("button").html(function(index, html) {
return "<div>" + html + "</div>"
})
Upvotes: 1
Reputation: 146
You can simply use wrapInner:
$(this).wrapInner( "<div></div>" );
jsfiddle: http://jsfiddle.net/hzj643tt/
Upvotes: 1