function JGallery() {
this.elements = this._init();
this.overlay = this.elements.overlay;
this.media_hld = this.elements.media_hld;
}
JGallery.prototype._init = function(){
var overlay = document.createElement('div');
var media_hld = document.createElement('div');
return{
'overlay': overlay,
'media_hld': media_hld
}
};
这是我创建文档片段并使用它的地方,以便我可以将多个 div 添加到同一元素:
JGallery.prototype.getReference = function(holder) {
var overlay = this.overlay;
var media_hld = this.media_hld;
var that = this;
var holderChildren = holder.querySelectorAll('img');
var docfrag = document.createDocumentFragment();
holderChildren.forEach(function (e) {
e.addEventListener('click', JGallery.prototype.showMe.bind(that), false);
var media_holder = that.media_hld;
media_holder.textContent = "<img src="+e.getAttribute('src')+">";
docfrag.appendChild(media_holder);
//it only appends the last child of my array...
});
overlay.appendChild(docfrag);
};
我的目标是拥有这样的东西:
<div class="JGallery_BG">
<div class="JGallery_mediaContainer"><img src="images/thumb_video.jpg"></div>
<div class="JGallery_mediaContainer"><img src="images/thumb_video.jpg"></div>
</div>
顺便说一句,forEach
函数运行良好,可以运行 8 或 9 次。但我不确定它是否会在每次运行时将节点添加到 docFrag 中。
另一件事,我并不坚持使用文档片段,如果有更好的方法将多个元素添加到一个元素,我想了解它并使用它。
最佳答案
问题之一是您不断重复使用相同的介质支架 <div>
每次迭代中的元素。
在下面的代码中that.media_hld
始终引用相同的元素。
var media_holder = that.media_hld;
media_holder.textContent = "<img src="+e.getAttribute('src')+">";
docfrag.appendChild(media_holder);
如果您克隆节点,它应该可以工作,并且您还需要设置 innerHTML
属性(property),而不是 textContent
.
var media_holder = that.media_hld.cloneNode();
我发现的另一件事是从 querySelectorAll
返回的内容不是数组,因此没有 forEach
方法。
你可以借forEach
但来自数组实例:
[].forEach.call(holderChildren, forEachBodyFunction);
整个内容可以读作:
JGallery.prototype.getReference = function(holder) {
var docfrag = document.createDocumentFragment(),
images = holder.querySelectorAll('img');
[].forEach.call(images, function (img) {
img.addEventListener('click', JGallery.prototype.showMe.bind(this), false);
var media_holder = this.media_hld.cloneNode();
media_holder.appendChild(img.cloneNode());
docfrag.appendChild(media_holder);
}.bind(this));
this.overlay.appendChild(docfrag);
};
关于javascript - 如何使用 DocumentFragment 将多个元素附加到 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41492411/