Menu
I have an html structure that looks like this:
<h5>Title</h5>
<p> Content </p>
<ul>
<li>Item</li>
<li>Item</li>
</ul>
<p> Content </p>
<h5>Title</h5>
<p> Content </p>
<ul>
<li>Item</li>
<li>Item</li>
</ul>
<p> Content </p>
In summary it's just some headers with content below them, I just need everything below the header tags in a div like this:
<h5>Title</h5>
<div>
<p> Content </p>
<ul>
<li>Item</li>
<li>Item</li>
</ul>
<p> Content </p>
</div>
I've tried using the .wrap function of jQuery but no luck since there can be multiple types elements below the header tags, I found this question: jQuery wrap sets of elements in div which is very similar but haven't been able to fit it into what I need, can anyone help me?
Thanks in advance!
457
In general, you can't have an inline element, like an anchor (<a>) or span, wrap around a block level element like a division (<div>) or heading.
jQuery wrap() method is used to wrap specified HTML elements around each selected element. The wrap () function can accept any string or object that could be passed through the $() factory function. Syntax: $(selector).
jQuery wrap() Method The wrap() method wraps specified HTML element(s) around each selected element.
The wrapped set is simply a list of DOM elements(with their children) in the order in which they are defined in the current document that matches a selector or in the order in which they have been created on the fly with the $(html) function.
Do this:
$(document).ready(function () {
$('h5').each(function () {
$(this).nextUntil('h5').wrapAll('<div class="box"></div>');
})
})
I would just stick a div in the page after the h5, and manually insert the elements into it.
Assuming that everything is inside something, like the body tag (untested!):
<body>
<h5>Title</h5>
<p> Content </p>
<ul>
<li>Item</li>
<li>Item</li>
</ul>
<p> Content </p>
</body>
var children = $(document.body).children(),
$child
$div;
for(var x = 0, child; child = children[x++];) {
$child = $(child);
if($child.is('h5')) {
$div = $('<div></div>').after($child);
} else {
$child.appendTo($div);
}
}
You can try this:
http://jsfiddle.net/GGjXN/1/
$(function() {
$('h5').each(function(i, e) {
$(e).nextUntil('h5').wrapAll('<div>');
});
});
Try this
var $div;
$("h5").each(function(){
$div = $("<div />");
if($(this).nextAll("h5").length){
$(this).after($div.append($(this).nextUntil("h5")));
}
else{
$(this).after($div.append($(this).siblings()));
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
