javascript - 如何在不重复的情况下使用 jQuery 附加 HTML 元素？（来自 AJAX 响应）

Question

所以我有一个 Ajax 请求，它基于地图边界，在 DIV 中获取引导卡的 HTML 响应。每次拖动地图时，Ajax 都会获取其位置并将结果附加到左侧 (col-6) 和地图右侧 (col-6) 的 div。如何设置在已插入位置的位置拖动地图时元素不会重复的条件？非常感谢！

响应： div class="card property-card with-overlay v3" data-lng="15.336051956523716" data-lat="44.63806097802354" appid="4">

div class="card property-card with-overlay v3" data-lng="15.236051956523716" data-lat="44.03806097802354" appid="5">

函数： google.maps.event.addListener(map, 'idle', function () {

    var bounds = map.getBounds();
    var getNElng = bounds.getNorthEast().lng(); //max
    var getSWlng = bounds.getSouthWest().lng(); //min

    var getNElat = bounds.getNorthEast().lat(); //max
    var getSWlat = bounds.getSouthWest().lat(); //min
    $.ajax({

        //get the data from the html based on map bounds
        url: '/property/ajax/html?range_lng=' + getSWlng + '|' + getNElng + '&range_lat=' + getSWlat + '|' + getNElat,

        success: function (r, status, jqXHR) {
          
            if (status == 'success') {     
                var response = $(r);

                var locations = [];
                var markers = [];


                  // MY QUESTION PART
                 //save response html to an variable
                let result = response.find("[data-lat]").each((i, e) => {
                    var lat = $(e).data("lat");
                    var lng = $(e).data("lng");
                });
                
                //append the results to the DIV with id load-wrapper
                for (var i = 0; i < result.length; i++) {
                $('#load-wrapper').append(result[i]);
                }



                let result2 = response.find("[data-lat]").map((i, e) => {
                    return {
                        lat: $(e).data("lat"),
                        lng: $(e).data("lng")
                    }
                }).toArray();

                for (var i = 0; i < result2.length; i++) {
                    var lo = result2[i].lng;
                    var la = result2[i].lat;
                    locations.push([la, lo])
                }

                // console.log(result);
                // console.log(locations);

                //fill marker with data from locations and fill all markers to markers array
                for (var i = 0; i < locations.length; i++) {
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
                        // icon: icons[locations[i][2]].icon,
                        map: map,
                        // title: "property-"+(locations[i][3]),
                    });
                    markers.push(marker);
                }

            } else {
                console.log(status);
            }
        }

    });

标签： javascripthtmljqueryajaxrequest