将标签包装在现有项目内 <li> 使用jQuery的元素

Question

我正在使用jquery使用以下命令创建列表： $(list).append(item); （其中list是列表引用，而item是要添加的$('<li>')项目，如下所示：

var item = $('<li>')
$(item).append('Some Data').append('some more data');
$(list).append(item);

这将以以下格式创建一个列表，该列表运行良好：

<ul>
    <li>Some data, and some more Data from the 'list' var</li>
    <li>Some data, and some more Data from the 'list' var</li>
    <li>Some data, and some more Data from the 'list' var</li>
    <li>Some data, and some more Data from the 'list' var</li>
</ul>

我现在想尝试使用某些CSS使它看起来更好，因此我想在此列表中的元素周围包装各种标签，但是我一直在努力获取正确的语法。

我希望实现的是：

<ul>
    <li><div>Some data and <h3>some more Data from the ‘list’ var</h3></div></li>
    <li><div>Some data and <h3>some more Data from the ‘list’ var</h3></div></li>
    <li><div>Some data and <h3>some more Data from the ‘list’ var</h3></div></li>
    <li><div>Some data and <h3>some more Data from the ‘list’ var</h3></div></li>
    <li><div>Some data and <h3>some more Data from the ‘list’ var</h3></div></li>
</ul>

我尝试过手动添加标签（例如，使用+ “<div>”和+ “</div>”但这似乎可以同时打开和关闭标签（即，它呈现<div></div> ，而不管我实际上在何处放置了结束标记）；我尝试使用.append(“<div>”)等进行此操作，在希望它们出现在字符串中的点上，结果相似我尝试使用.wrap() ，但这会使所有文本消失（这使我觉得语法错误！）。

谁能建议实现我想要实现的最佳方法？

Answer 1

您可以将任何内容添加到新项目中，包括使用jQuery创建的其他元素。

在将条目添加到现有列表之前，您可以将添加的元素包装到另一个标签中：

 var list = document.querySelector('ul'); $('<li>') .append('some data') // add text .append($('<h3>', { text: 'some more data' })) // add h3 with text .wrapInner('<div>') // wrap everything in div .appendTo(list); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul></ul> 

Answer 2

您需要包装LI的内容 （包括文本所在的原始文本节点）：

$('li').contents().wrap("<div><h3/></div>");

JSFiddle： http : //jsfiddle.net/TrueBlueAussie/a447v8d9/

但是，正如@Arun P Johny指出的那样，有一个更新/更短的wrapInner

$('li').wrapInner('<div><h3/></div>')

JSFiddle： http : //jsfiddle.net/TrueBlueAussie/a447v8d9/5/

将任何内容包装在多个嵌套元素中时，它会将要包装的元素插入第一个 “最深”元素内。 例如http://jsfiddle.net/TrueBlueAussie/a447v8d9/4/

另外，仅使用包装中的第一个“根级别”元素：例如， http : //jsfiddle.net/TrueBlueAussie/a447v8d9/3/将不使用第二个div 。

更新：

由于您只想在H3中包装部分文本，因此需要修改html() ，所以请使用@Arun P Johny的解决方案。

Answer 3

您可以使用.wrapInner（）包装内部内容

$('ul li').wrapInner('<div />');

$('ul li div').html(function(i, html){
    return html.substring(0, 15) + '<h3>' + html.substring(15) + '</h3>'
});

演示： 小提琴

注意：要使用h3您需要指定要包装的内容