如何使用 jQuery 动态创建嵌套列表？

Question

我是 Web 开发的新手，我有点受困于此。我有这个想法，但我不知道如何使用 jQuery 来表达它。我有一个无序列表，每次单击按钮时都应使用列表项进行更新。如果一个列表项被突出显示，然后我单击添加按钮，它应该在该 li 中创建一个子列表。示例标记为：

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

我的主要问题是如何获取选定的列表项，以便我可以在其中正确插入子列表。提前致谢。

Answer 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/

Answer 2

由于您将 "highlight" class 放在所选列表项上，您可以使用它来获取所选项目，如下所示：

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>，或者是否需要添加一个。

jsfiddle

如何使用 jQuery 动态创建嵌套列表？

How to dynamically create nested list using jQuery?

jquery

nested-lists