Question

我将此作为测试工具：

<html>
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $("li").click(function () {
            var id = $(this).attr("nodeid");
            var path = window.location + "/SelectNode/" + id;

            $.getJSON(path, function (data, status) {
                alert(id + " : " + data);
                //$("#" + id).text("<ul><li>" + data + "</li></ul>");
            });

        });

    });


</script>
<title>JS Test</title>
<head>
    JS Test</head>
<body>
    <div">
        <ul>
            <li nodeid="1">item 1</li>
            <li nodeid="2">item 2</li>
            <li nodeid="3">item 3</li>
        </ul>
    </div>
</body>
</html>

我希望能够为'clicked'li添加新的子列表。对于我的生活，我无法弄清楚点击特定li项后注入html的语法。目的是添加一个完整的

<ul>
<li>injected item</li>
</ul>

选中李后。注释掉的是我对它的微弱尝试。不言而喻，我是一名jQuery初学者。阅读完文档之后，我一直很困惑，所以需要一些人互动才能把我逼到这里......

Answer 1

首先，nodeid属性是否有效？我不这么认为。使用data-nodeid，这将是有效的HTML5。（为什么不使用普通id？你混合nodeid和id。无论如何，nodeid可以使用。{继续阅读。）

如果您想添加HTML代码，则无法使用.text()。添加HTML代码的方法有很多，这是.append：http://jsfiddle.net/Vxaeb/1/

的示例

$("li").click(function() {
    $(this).append('<ul><li>injected item</li></ul>');
});

（仅举例）

您获得data-nodeid var id = $(this).attr("data-nodeid");。使用$('li[data-nodeid="'+id+'"]')访问元素。

HTML：

<div>
    <ul>
        <li data-nodeid="1">item 1</li>
        <li data-nodeid="2">item 2</li>
        <li data-nodeid="3">item 3</li>
    </ul>
</div>

Full JS：

$("li").click(function() {
    var id = $(this).attr("data-nodeid");
    var path = window.location + "/SelectNode/" + id;

    $.getJSON(path, function (data, status) {
        alert(id + " : " + data);
        $('li[data-nodeid="'+id+'"]').append('<ul><li>'+data+'</li></ul>');
    });
});

这里有一个jsFiddle与您的代码和nodeid（正如您提到的那样）和有效的HTML5： http://jsfiddle.net/Vxaeb/3/

Answer 2

首先，您没有页面上具有该ID的元素。第二，你试图将html添加到LI元素，而不是纯文本，所以你应该使用.html()

$("li[nodeid=" + id + "]").html("<ul><li>" + data + "</li></ul>");

Answer 3

如果您的$('<li>item 4</li>').insertAfter('#ABC') ID为“ABC”，则

LI会有效。如果您在HTML中使用常规ID，则可以正常使用。

Answer 4

如果要在所选的li元素之后插入数据，请使用jQuery的after函数：

$('.selected').after('<p>Test</p>');

如果要在所选的li元素中插入数据，请使用jQuery的html函数。

$('.selected').html('<p>Test</p>');

Answer 5

这将有效：

$('li').click(function() {
    $(this).append('<ul><li>xxx</li></ul>');        
});

Click here for a working fiddle

在选定的<li> </li> </ul>中插入新的<ul>

5 个答案: