包装特殊div标签

时间:2014-11-19 13:32:29

标签: javascript jquery html css

我正在为一些模板工作,但对于在H2上包装div标签感​​到困惑,这是我的脚本:

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> 

3 个答案:

答案 0 :(得分:1)

您需要定位h2 div的后代id$('div#widget h2').each(function(){ var self = $(this); self.wrapAll('<div class="widget-title" />'); }); &#34;小部件&#34;:

wrap

你也可以只使用h2,因为你只定位each中的一个{{1}}。

答案 1 :(得分:1)

只需将您的选择器限制在h2内的#widget并使用wrap

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

答案 2 :(得分:0)

以这种方式试试

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

http://jsfiddle.net/p0ozb3bc/

不清楚是否要让它影响页脚中的h2s。如果不这样做,则必须将h2更改为#widget h2。