Wrap в специальных тегах Div

Question

Я работаю на какой-то шаблон, но спутать о оберточной Div тегов на H2, это мой сценарий:

HTML:

<style> 
.widget-title{ 
border:3px solid black; 
} 
</style> 
<div id="widget"> 
<h2>Title 1.1</h2> 
<ul> 
    <li>Item 1.1.1</li> 
    <li>Item 1.1.2</li> 
    <li>Item 1.1.3</li> 
</ul> 
<br /> 
<h2>Title 1.2</h2> 
<ul> 
    <li>Item 1.2.1</li> 
    <li>Item 1.2.2</li> 
    <li>Item 1.2.3</li> 
</ul> 
</div> 
<br /> 
<div class="footer"> 
<h2>Title 2</h2> 
<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 
</div> 
<script type="text/javascript"> 
document.getElementById('widget') 
$('h2').each(function(){ 
    var self = $(this); 
    self.wrapAll('<div class="widget-title" />'); 
}); 
</script> 

Я хочу, чтобы добавить метки для каждый H2 теги, но только внутри div id="widget" теги, я имею в виду люблю:

<div id="widget"><div class="widget-title"><h2>title</h2></div</div> 

Answer 1

Просто ограничить селектор h2 с внутри #widget и использовать wrap:

$('#widget h2').wrap('<div class="widget-title" />'); 

Answer 2

Вы должны предназначаться только те h2, которые являются потомками div с «виджетом» id:

$('div#widget h2').each(function(){ 
    var self = $(this); 
    self.wrapAll('<div class="widget-title" />'); 
}); 

Вы также можете делать хорошо только с wrap хотя, потому что вы только против одного h2 в each.

Answer 3

Попробуй так

$(function(){ 
    $('h2').wrap('<div class="widget-title" />'); 
}); 

http://jsfiddle.net/p0ozb3bc/

не ясно, если вы хотите, чтобы повлиять на H2S в нижнем колонтитуле или нет. Если вы этого не сделаете, вам придется изменить h2 на #widget h2.