Question

我有一个列表，我使用ajax调用动态添加到html页面。我正在添加这样的列表项：

Jquery中的

代码：

$.getJSON('getData.php', function(result){
    $.each(result,  function(index, results) {

        $('#myList').append('<li>'+results.title+'</li>');
    });

});

我想要做的是动态地添加一个div来添加li列表。因此，每次添加列表项时，它们都会添加到div中。

所需的输出将是这样的：

<div>
  <li>First Added item</li>
  <li>Second Added item</li>
  <li>Third added itme</li>
</div>

这是我尝试解决的问题：

  $.getJSON('getChapterFilter.php', {name: bookSel}, function(result){

    var appendDiv = false;
    var appendEnd = false;
    $.each(result,  function(index, results) {

        if (appendDiv === false) {
            $('#myList').append('<div>');
            appendDiv = true;
            }
        else {

        $('#myList').append('<li>'+results.title+'</li>');
        }

        if(appendEnd === false) {
            $('#myList').append('</div>');
            appendEnd = true;
            }
     });

  });

我遇到的麻烦是李没有填入列表中。这就是上面代码所发生的事情：

<div></div>
<li>first added item</li>
<li>second added item</li>
<li>third added item</li>

Answer 1

$('#myList').append('<div>');

这会将<div></div>附加到#myList

要在div中添加<li>，您必须执行以下操作：

$('#myList > div').append('<li>'+results.title+'</li>');

为了缩短它，你可以这样做：

$.getJSON('getChapterFilter.php', {name: bookSel}, function(result){
    $("#myList").append("<div>" + result.reduce( function(p,c){ return p + "<li>" + c.title + "</li>" }, "" ) + "</div>" );
});

Answer 2

只需将<div>元素附加到#myList并将其分配给变量。

$.getJSON( 'getData.php', function( result ) {

    var $container = $( '<div>' ).appendTo( '#myList' );

    $.each( result, function( index, results ) {

        $container.append( '<li>' + results.title + '</li>' );

    } );

} );

Answer 3

为什么不在循环中附加div，然后将div附加到列表中？

实施例

$.getJSON('getData.php', function(result){
    var $myDiv = $('<div>'); // create div

    $.each(result,  function(index, results) {
        $myDiv.append('<li>' + results.title + '</li>'); // append list item to div
    });

    $('#myList').append($myDiv); // append div to myList
});

Answer 4

将我的评论转到答案：

定位div并追加到那个。现在，您要定位ID =＆＃39; myList＆＃39;并将所有内容添加到其末尾。

尝试：

    $('#myList').find('div').append(...)

增加额外的探索...... .find（）所做的是在$（＆＃39; #myList＆＃39;）内搜索任何/所有＆＃39; div＆＃39;元件（一个或多个）。你需要在这里小心一点，因为如果有一个以上的div那么他们将获得追加。如果这是一个问题，那么您可以使用

进行调整

    $('#myList').first('div').append(...);

或

    $('#myList').find('div').eq(0).append(...);

或类似。

Answer 5

一旦您在开头追加<div>，您的网络浏览器就会像“哇，这是无效的HTML因为标签永远不会关闭;我只是快速添加结束标记”并立即关闭你的div标签，导致你看到的输出。要通过这种方法实现您的目标，您需要这样的东西：

var appendDiv = false;
var appendEnd = false;
var myHtml = "";
$.each(result,  function(index, results) {
    if (appendDiv === false) {
        myHtml += '<div>';
        appendDiv = true;
        }
    else {

    myHtml += '<li>'+results.title+'</li>';
    }

    if(appendEnd === false) {
        myHtml += '</div>';
        $('#myList').append(myHtml);
        appendEnd = true;
        }
 });

}）;

这样，浏览器在完成编写之前不会尝试评估您正在创建的HTML，因此它会正确处理。（授予，通过字符串手工制作的HTML仍然可能不是最好的方法）

Answer 6

首先，<li>元素应位于<ul>或<ol>元素中，而不是IN <div>。

要做你想做的事，你应该这样做：

将<ul>附加到您的文档中
选择已添加的<ul>
然后将<li>...</li>追加到选定的<ul>

第一个例子：

var $myList = $('#myList');

$myList.append('<ul/>');
$myList.find('ul').append('<li>...</li>');

第二个例子：

var $ul = $('<ul/>');

$ul.appendTo($('#myList'));
$ul.append('<li>...</li>');

循环更好的方法是：

$.getJSON('getChapterFilter.php', {name: bookSel}, function(result){
    var $myListWrap = $('#myListWrap'),
        $myList     = $('<ul/>'),
        listData    = '';

    $myList.appendTo($myListWrap);

    $.each(result, function(index, results) {
        listData += '<li>' +results.title+ '</li>';
    });

    $myList.append(listData);
});

动态地将li和div添加到html页面

6 个答案: