Вставка новой <ul>в выбранную <li> - PullRequest
Новая
       3

Вставка новой <ul>в выбранную <li>

0 голосов
/ 06 марта 2012

У меня есть это в качестве тестового жгута: 

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

Я хочу иметь возможность добавить новый дочерний список в li "нажал".По жизни я не могу понять синтаксис введения html после того, как щелкнул конкретный элемент li.Намерение состоит в том, чтобы добавить целые 

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

после выбранного li.Закомментированный бит - моя слабая попытка.Само собой разумеется, что я начинающий JQuery.Я очень запутался после прочтения документации, поэтому мне нужно, чтобы некоторые люди общались со мной ...

Ответы [ 5 ]

1 голос
/ 06 марта 2012

Во-первых, является ли атрибут nodeid верным HTML?Я так не думаю.Используйте 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>

Полный 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/

0 голосов
/ 06 марта 2012

Это будет работать: 

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

Нажмите здесь для рабочей скрипки

0 голосов
/ 06 марта 2012

$('<li>item 4</li>').insertAfter('#ABC') будет работать, если у вас есть LI с идентификатором "ABC".Если вы используете обычные идентификаторы в своем HTML, это будет работать нормально.

0 голосов
/ 06 марта 2012

Если вы хотите вставить данные после выбранного вами элемента li, используйте функцию jQuery после : 

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

Если вы хотите вставить данные в выбранный вами элемент li, используйте функцию jQuery html . 

$('.selected').html('<p>Test</p>');
0 голосов
/ 06 марта 2012

Прежде всего, у вас нет элемента с таким идентификатором на странице.во-вторых, вы пытаетесь добавить html к элементу LI, а не просто текст, поэтому вы должны использовать .html()

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