Question

我正在使用AJAX创建一个简单的通知列表，并且我使用PHP脚本将数据附加到带有setInterval的div的html。它只应附加，如果它还没有附加该特定div，当我在数据库中插入一个新行时，它应该只添加新行，而不是用旧行垃圾邮件div。 / p>

<div class="notification-slider">
    <div class="title">Notifications</div>
    <ul class="notifications-container">
        <script type="text/javascript">
            $(document).ready(function() {
                var data = new FormData();
                var user_id = <?php echo $this->session->userdata("id"); ?>;
                data.append("user_id", user_id);

                setInterval(function() {
                    m.request({
                        method: "POST",
                        url: document.location.origin + "/index.php/_notifications/" + user_id,
                        data: data
                    })
                    .then(function(response) {
                        $.each(response, function(index, value){
                            if($(".notification-item").attr("data-noti-attr") != response[index].id)
                            {
                                $(".notifications-container").append('<a href="'+response[index].url+'" class="notification-item" data-noti-attr="'+response[index].id+'"> <li class="uk-clearfix"> <img src="'+response[index].sender_user_id+'" class="notification-image"> <div class="message"> <b>'+response[index].sender_user_id+'</b> '+response[index].content+'<br><br> <div class="uk-text-muted"><i class="fa fa-clock-o"></i> '+response.time_received+' ago</div> </div> </li> </a>');
                            }
                        });
                    });
                }, 1000);
            });
        </script>
    </ul>
</div>

我目前正在使用名为data-noti-attr的属性。基本上，如果属性data-noti-attr的值为response[index].id的div已经存在，请不要再添加它。但它并不像我想要的那样工作，因为它不断发布所有内容的重复。

我怎样才能做到这一点？ （我试着尽可能地解释它，问它是否令人困惑）

Answer 1

Attr仅返回第一项的值。阅读有关它的完整文档here。

描述：获取匹配元素集中第一个元素的属性值。

因此，您需要根据条件过滤找到的项目（在您的情况下为特定数据属性）。

例如，使用.is()方法

if ($('.item').is('[data-id="' + myId+ '"]')) {
   // do stuff
}

Answer 2

检查长度。你可以用这个

if($('.notification-item[data-noti-attr="'+value.id+'"]').length ==0){
....
}

仅在没有重复项时附加

2 个答案: