提问人：saiha 提问时间：9/9/2015 更新时间：9/9/2015 访问量：1754
如何使用jQuery动态创建嵌套列表？
How to dynamically create nested list using jQuery?
问：
我是 Web 开发的新手，我有点陷入困境。我有这个想法，但我不知道如何使用jQuery来制定它。我有一个无序列表，每次单击按钮时都应该使用列表项进行更新。如果突出显示一个列表项，然后单击“添加”按钮，它应该在该列表中创建一个子列表。示例标记为：
$(document).ready(function () {
$("#btnAdd").click(function () {
addExpression();
});
function addExpression() {
var mainList = document.getElementById("mainList");
var li = document.createElement("li");
var alink = document.createElement("a");
var str = document.createTextNode("test");
alink.appendChild(str);
li.appendChild(alink);
mainList.appendChild(li);
}
function createSublist() {
var sublist = document.createElement("ul");
var li = document.createElement("li");
var alink = document.createElement("a");
var str = document.createTextNode("test");
alink.appendChild(str);
li.appendChild(alink);
sublist.appendChild(li);
return sublist;
}
$(document).on("click", "ul.expression li", function () {
$("ul.expression li").removeClass("highlight");
$(this).addClass("highlight");
});
}); .expression ul {
list-style: none;
}
.expression li {
width: 25%;
height: 50px;
text-align: center;
color: #B84DFF;
cursor: pointer;
border-style:solid;
border-width:1px;
}
.expression li.highlight {
background-color: cyan;
font-weight: bold;
}
.hide {
display: none;
}<button id="btnAdd">Add</button>
<div id="containerDiv">
<ul id="mainList" class="expression">
</ul>
</div>我的主要问题是如何获取选定的列表项，以便我可以正确地在其中插入子列表。提前致谢。
答：
0赞
Jack jdeoel
9/9/2015
#1
你应该在$（document）.ready（）之外使用你的函数，也使用jQuery是简单和简短的!!
$(document).ready(function () {
$("#btnAdd").click(function () {
addExpression();
});
$("body").on("click", "ul.expression li", function () {
$("ul.expression li").removeClass("highlight");
$(this).addClass("highlight");
});
});
function addExpression() {
$('ul#mainList').append("<li><a>test</a></li)");
}
做其他也像这样...
http://jsfiddle.net/85aw5rwv/1/
评论
0赞
John S
9/9/2015
为什么要将函数移出 ？这无缘无故地将其置于全球范围内。$(document).ready()
0赞
Jack jdeoel
9/9/2015
如果它是一个可重用的组件，请把它放在外面，这样你就可以轻松地将它移动到一个单独的文件中，并从不同的上下文中调用。
0赞
saiha
9/10/2015
谢谢你指出这一点。我对 Web 开发的所有内容都很陌生。感谢您的意见。:D
0赞
John S
9/9/2015
#2
由于将“highlight”类放在选定的列表项上，因此可以使用它来获取选定的项，如下所示：
var $list = $("#mainList");
var $selectedItem = $list.children('li.highlight:first');
if ($selectedItem.length > 0) {
// There is a selected item.
} else {
// There is no selected item.
}
您可以执行类似的操作来检查所选项目是否已经包含其中，或者是否需要添加一个。<ul>
评论
0赞
saiha
9/10/2015
哎呀。谢谢。:)我从来没想过。现在，我需要的就是如何设计它看起来像一棵树。非常感谢您的帮助。
评论