Question

我需要在jQuery中使用<li>将<ul>元素附加到多个for-loop。

代码段：

jQuery：

var lists = $('ul.menu');

for(var i=0; i<lists.length; i++){
    var lnk = "<li>All</li>";
    lnk = $('<div />').html(lnk).text();
    lists[i].prepend(lnk);
}

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
    <li>Graphics</li>
    <li>Videos</li>
    <li>Programming</li>
</ul>
<hr>
<ul class="menu">
    <li>Our Story</li>
    <li>About Us</li>
</ul>

根据代码<li>插入为适当的文本，但其格式为纯文本而不是<li>。

我在做什么错？如何纠正我的错误？

Answer 1

TJ Crowder's solution的jQuery替代品...

$('ul.menu').each(function() {
    $(this).prepend("<li>All</li>");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
    <li>Graphics</li>
    <li>Videos</li>
    <li>Programming</li>
</ul>
<hr>
<ul class="menu">
    <li>Our Story</li>
    <li>About Us</li>
</ul>

Answer 2

您正在调用原始DOM prepend（仅在现代浏览器中存在），因为lists[i]访问原始ul元素。您还只是获取要添加的内容的 text ，而不包含任何li标记。您可能想要：

调用jQuery的prepend，然后
将li包含在您要添加的内容中

示例：

var lists = $('ul.menu');

for(var i=0; i<lists.length; i++){
	var lnk = "<li>All</li>";
	lists.eq(i).prepend(lnk);
}

/* No CSS */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
	<li>Graphics</li>
	<li>Videos</li>
	<li>Programming</li>
</ul>
<hr>
<ul class="menu">
	<li>Our Story</li>
	<li>About Us</li>
</ul>

如何使用jQuery将HTML`<li>`前缀为`<ul>`？

2 个答案: