每次在codeigniter中完成ajax succes函数循环时,都会尝试将数据添加到新的div中

时间:2017-02-20 07:30:38

标签: javascript php jquery ajax codeigniter

嘿伙计们我试图将数据从循环发送到div元素,以便我可以逐个显示它。但是当我尝试发送数据时,它只是将所有值显示在一起我能做什么?

这是我的代码

<script type="text/javascript">
    $(document).ready(function(){
        $(window).scroll(function(){
            var lastID = $('.load-more').attr('lastID');
            if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0){
                jQuery.ajax({
                    type:'POST',
                    url:'<?php echo base_url("user/get_all_post"); ?>',
                    data: "id=" + lastID,
                    dataType: 'json', 
                    beforeSend:function(html){
                        $('.load-more').show();
                    },
                    success:function(data){
                        var ParsedObject = JSON.stringify(data);            
                        var json = $.parseJSON(ParsedObject);
                        $PostId=json[4]['id'];
                        for(i=0;i<5;i++ )
                        {
                            var post_status = json[i]['status'];
                            var status_image = json[i]['status_image'];
                            var multimage = json[i]['multimage'];
                            alert(post_status);
                            $("#post_status").show();
                            $("#status_data").append(post_status);
                            $("#post_status").hide();
                        }
                        $('.load-more').attr('lastID', $PostId);
                    }  
                });
            }
        });
    });
</script>

但它只是将数据附加在一起让我告诉你

image for status updating

每次循环中的值都可以添加div。

这是我想在每个div中添加的html

<div class="post_status" id="post_status" style=" margin: 20px 50px 0px 40px; "> <a href="#" ><?php echo img($user_image); ?></a><a href=""><?php echo $uname; ?></a> <div class="status_post" id="status_data"></div> </div> 

3 个答案:

答案 0 :(得分:1)

您需要将整个生成的html附加到相关容器:

$('<div class="post_status" id="post_status" style=" margin: 20px 50px 0px 40px; ">' +
    '<a href="#"><img src="'+status_image+'"></a><a href="">'+user_name+'</a>' + 
    '<div class="status_post" id="status_data">'+ post_status + '</div></div>')
 .appendTo("#the-comments-container");

您需要user_name变量。

答案 1 :(得分:0)

$("#status_data").append('<div>'+post_status+'</div>');

答案 2 :(得分:0)

如果我理解正确, 您也可以使用此方法复制现有div - How can i duplicate a div onclick with javascript?

将新信息附加到重复的div, 然后将新div插入页面。

这样的事情:

var yourDiv = document.getElementById('yourDiv');
var duplicatedDiv = Duplicate(yourDiv);
duplicatedDiv.innerHTML = post_status;
$("#divContainer").append(duplicatedDiv);