判断元素是不是存在

Posted 2023-05-09

【中文标题】判断元素是不是存在

【英文标题】：Determine if an element is exists判断元素是否存在

【发布时间】：2011-11-02 10:03:51

【问题描述】：

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

这是我的代码

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_cmets 获取传递给它的 pheed_id 的 cmets。 我如何确定评论区域是否已被填充，如果可用，则使用新的 cmets 对其进行更新。谢谢

【参考方案1】：

检查

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

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

【参考方案2】：

几个选择：

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

2) 如果您有一个 ajax 调用可以只检索新的 cmets，那么您可以检查 DOM 以查看 DOM 中是否已经有 cmets，然后在某个令牌及时请求新的 cmets（您以前会保存）。当您收到新的 cmets 时，您会将它们附加到您拥有的内容中。

$('#pheed-stream').children().length 将告诉您在 pheed-stream 层次结构中有多少孩子。如果那是零，你还没有做任何 pheeds。

我建议只检索所有 cmets 并用新的 cmets 列表替换您拥有的所有内容可能比尝试仅检索新 cmets 更简单。仅检索新的 cmets 需要某种时间令牌，您可以将其提供给服务器，以便它知道要给您哪些“新 cmets”。

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

【参考方案3】：

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