Question

如果我有父div：

<div class="large-9 columns"></div>

我想在父母中创建多个子div：

<div class="large-9 columns">
    <div>JSON data point 1</div>
    <div>JSON data point 2</div>
    <div>JSON data point 3</div>
</div>

我将如何通过当前的实施来实现这一目标：

$(document).ready(function() {
    $(document).bind("ajaxSuccess", "form.message_form", function(event, xhr, settings) {
        var $messages = $(".messages");
        $('<div class="large-3 columns">').prepend($('<img>', { id: 'avatar', src: xhr.responseJSON.sender_avatar })).appendTo($messages);
        $('<div class="large-9 columns">')
            .append('<div>').html(xhr.responseJSON.content)
            .append('<div>').html('sent by ' + xhr.responseJSON.sender_name)
            .append('<div>').html('sent at ' + xhr.responseJSON.created_at)
            .appendTo($messages);
        $('#message_content').val('');
    });
});

目前只呈现xhr.responseJSON.created_at而不是其他两个数据点？

Answer 1

问题是因为您append()新的div元素，但您没有给它们任何内容，因为append函数返回父选择器中的元素，而不是新的元件。然后，您每次都会覆盖新html() div的.columns，因此只有最后一个值可见。

试试这个：

var $container = $('<div />', { class: 'large-9 columns' }).appendTo($messages);
$('<div />', { html: xhr.responseJSON.content }).appendTo($container);
$('<div />', { html: 'sent by ' + xhr.responseJSON.sender_name }).appendTo($container);
$('<div />', { html: 'sent at ' + xhr.responseJSON.created_at }).appendTo($container);

Answer 2

在提供的父div

中尝试添加多个子div的demo

var childDivs = "<div>sasas</div>"
for(var i=0; i<childDivs.length; i++){
    $('.columns').append(childDivs)
}

Answer 3

尝试如下：

http://urbanetradio.com/wp-json/posts

您通过稍后添加$(document).ready(function() { $(document).bind("ajaxSuccess", "form.message_form", function(event, xhr, settings){ var $messages = $(".messages"); $('<div class="large-3 columns">').prepend( $('<img>', {id: 'avatar', src:xhr.responseJSON.sender_avatar}) ).appendTo($messages); $('<div class="large-9 columns">') .append('<div>' +xhr.responseJSON.content+'</div>') .append('<div> sent by '+ xhr.responseJSON.sender_name+'</div>') .append('<div> sent at ' + xhr.responseJSON.created_at+'</div></div>') .appendTo($messages); $('#message_content').val(''); }); });来覆盖从.append写入的数据，并将.html添加到html而不是新添加的<div class="large-9 columns"> }

使用jQuery在单个div中创建多个div

3 个答案: