判断一个元素是否存在

Question

我正在为Web应用程序创建一个评论系统，当用户单击评论图像时加载评论，使用json动态生成html代码来显示评论。 但是，当再次单击图像时，会再次发出请求，用相同的数据填充页面，

这是我的代码

function latest_pheeds() {
    var action = url+"pheeds/latest_pheeds";
    $.getJSON(action,function(data) {
        $.each(data,function(index,item) {
            $('#pheed-stream').append
            (
            '<div class="pheed" id="'+item.pheed_id+'">'+
            '<p><a href="">'+item.user_id+'</a></p>'+
            '<p>'+item.pheed+'</p>'+
            '<div class="pheed_meta">'+
            '<span>'+item.datetime+' Ago</span>'+
            '<span>'+item.comments+
            '<img class="comment_trigger" src="/pheedbak/assets/img/comment.png" title="Click to comment on pheed" onclick="retrieve_comments('+item.pheed_id+')">'+
            '</span>'+
            '</div>'+
            '</div>'
            );
        });
    });
}



function retrieve_comments(pheed_id) {
    var action = url+'comments/get_comments';
    var crsf =  $('input[name=ci_csrf_token]').val();
    var dataString = "pheed_id="+pheed_id+"&ci_csrf_token="+crsf;
    $.ajax({
        url:action,
        type:'POST',
        cache:false,
        dataType:'json',
        data:dataString,
        success:function(data) {
            $.each(data,function(index,item) {
                $("#" + pheed_id).append(
                '<div class="pheed_comments">'+
                    '<div class="comment">'
                    +'<span><p>'+item.user+'</p></span>'
                     +item.comment+
                    '</div>'+
                '</div>'+
                '<div id="comment_box">'+
                    '<textarea id="comment" cols="30">'+
                    '</textarea><br>'+
                    '<input type="button" class="submit_btn" value="comment" />'+
                '</div>'
                );
            });
        }
    });
}

latest_pheeds（）加载pheeds，并retrieve_comments获取传递给它的pheed_id的评论。 我如何确定评论区域是否已填充，并使用新评论（如果有）更新它。谢谢

Answer 1

检查

$("#" + pheed_id +' .pheed_comments').length

如果元素（我猜你的意思是 div.pheed_comments ）不存在，是否为 0。

Answer 2

有几种选择：

1) 如果您已经拥有 ajax 调用中的所有注释，那么只需从 DOM 中删除之前的注释并插入您刚刚获得的所有内容即可。

2）如果你有一个ajax调用只能检索新评论，那么你可以检查DOM以查看DOM中是否已经有评论，然后在某个标记之后及时请求新评论（你之前会这样做）已保存）。当您收到新评论时，您会将它们附加到您已有的评论中。

$('#pheed-stream').children().length 将告诉您 pheed-stream 层次结构中有多少个子级。如果为零，则说明您还没有进行任何操作。

我建议，最简单的方法是检索所有评论并用新评论列表替换所有内容，而不是尝试仅检索新评论。仅检索新评论将需要某种时间令牌，您可以向服务器提供该时间令牌，以便服务器知道要给您哪些“新评论”。

$("#" + pheed_id + " .pheed_comments").length 将告诉您是否已检索到该 pheed_id 的任何评论。

Answer 3

您正在添加带有 id 的 div 。只需检查它是否存在。如果是，则更新，否则插入。