Question

我有一种情况，而我通过Javascript对象中的AJAX调用生成内容（视频链接）。从后端返回此内容后，将生成HTML字符串并将其附加到DOM中的当前HTML。此HTML字符串包含'div'中的视频链接包装。我需要为这些新生成的div中的每一个应用一个新的Javascript对象，并使用以下代码完成：

if(response.videos.length != 0) {   
        jQuery(response.videos).each(function(key, video) {             
            self.html += "<div class='col-md-4' data-related-video='" + video.videoId + "'>";
                self.html += '<a href="#" class="dashboard-video"></a>';
                self.html += '<div class="video-information">';
                    self.html += '<h5 class="tk-bebas-neue">' + video.videoName + '</h5>';
                    self.html += '<p>' + video.videoDesc + '</p>';
                    self.html += '<p>Equipment: ';

                    self.html += "</p>";
                    ......................................MORE CODE

                    self.html += "</div>";
                self.html += '</div>';
            self.html += "</div>";
            newRatingArrayKey.push("#" + self.relatedDiv + " div[data-related-video=" + video.videoId + "] .video-rating");
        });     
        jQuery("#" + jQuery(self.element).attr("data-related") + " .col-md-8").append(self.html);           
        jQuery(newRatingArrayKey).each(function(key, element) {
            element = jQuery(element);              
            newRatingObject[key] = new Rater(element, jQuery(element).attr("data-rel"), jQuery(element).find(".star"), jQuery(element).attr("data-user-id"));
        });

    }

正如您所看到的，在我生成新的HTML字符串之后，我将其添加到DOM然后遍历新的div以将“rater”类应用于它们。我的问题是，有没有办法在应用于DOM之前将'rater'类应用于每个新生成的div？它只是让我觉得如果在添加的新内容和应用于新内容的rater类之间出现问题，页面可能会出错。谢谢！

Answer 1

您实际上不必做任何事情来满足您的顾虑。浏览器不会重新编辑页面，直到您的代码完成执行，并且在您添加“评估者”之前，任何其他可能执行的javascript代码都无法访问DOM。类。

如果你真的想要做你概述的事情，你可以使用一个未附加的元素（例如$('<div/>')）来添加你的内容，然后再将它移植到活动的DOM上。

但真正最好的解决方案是不连接字符串来创建DOM元素。而是使用DocumentFragment和createElement api，然后根据您的选择自由添加类。

在将生成的内容应用于DOM之前将Javascript类应用于生成的内容

1 个答案: