Question

我是网络开发的新手，我对此很感兴趣。我有这个想法，但我不知道如何使用jQuery来表达它。我有一个无序列表，每次点击一个按钮时都应该用listitem更新。如果突出显示了一个listitem，那么我单击Add按钮，它应该在li里面创建一个子列表。示例标记为：

＆＃13;

$(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");
            });

        });

＆＃13;

 .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;
        }

＆＃13;

<button id="btnAdd">Add</button>
    <div id="containerDiv">
        <ul id="mainList" class="expression">

        </ul>
</div>

＆＃13;

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

Answer 1

你应该在$（document）.ready（）之外使用你的函数，也使用jquery很简单!!!“

"10"

其他也喜欢这样......

http://jsfiddle.net/85aw5rwv/1/

Answer 2

由于您将“突出显示”类放在所选列表项上，您可以使用它来获取所选项目，如下所示：

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动态创建嵌套列表？

2 个答案: