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的contents（包括您的文本所在的原始文本节点）：

$('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/

当您在多个嵌套元素中包装任何内容时，它会将要包装的元素插入 first “deeppest”元素中。例如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>'
});

演示：Fiddle

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

使用jQuery </li>在现有<li>元素内的项目周围标记标记

3 个答案:

更新