用HTML包装代码（jQuery）

我想添加一些html到一个小部件区域，基本上是为了包裹内部内容。下面是当前的代码：用HTML包装代码（jQuery）

<aside id="meta-2" class="widget widget_meta"><h1 class="widget-title">Stuff</h1> 
    <ul> 
    <li><a href="#">Log in</a></li> 
    <li><a href="#">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li> 
    <li><a href="#">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li> 
    </ul> 
</aside>

我希望它变成：

<aside id="meta-2" class="widget widget_meta"><h1 class="widget-title">Stuff</h1> 
<div class="widget-inner"> 
    <ul> 
    <li><a href="#">Log in</a></li> 
    <li><a href="#">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li> 
    <li><a href="#">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li> 
    </ul> 
</div> 
</aside>

请注意，一些“小部件”不包含UL，有可能只是在影像内或一些文字。

我试过一些jQuery片段使用之前，追加等，但无济于事。

任何帮助将不胜感激。

来源

2014-09-10 Huw Rowlands

您可以使用.wrap()：

$("aside ul").wrap("<div class='widget-inner'></div>");

Working Demo

更新：非均匀DOM：

$("aside h1").nextAll().wrap("<div class='widget-inner'></div>");

Working Demo

来源

2014-09-10 08:37:02

谢谢。我已经更新了我的问题，因为我没有解释清楚。一些小部件内部不会有UL，有些小部件可能只是文本或图像。 – 2014-09-10 09:13:43

@HuwRowlands：h标签怎么样？它会一直在那里？ – 2014-09-10 09:19:31

是的，H1永远在那里。 – 2014-09-10 09:20:37

使用.wrap()函数见链接：wrap() jquery

来源

2014-09-10 08:38:51

回答上面：

$("aside h1").nextAll().wrap("<div class='widget-inner'></div>");

感谢

来源

2014-09-10 09:40:42

用HTML包装代码（jQuery）

回答

相关问题