Question

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添加节点。

另一件事，我不是坚持使用文档片段，如果有更好的方法将多个元素添加到一个元素，我想了解它并使用它。

Answer 1

其中一个问题是您在每次迭代中不断重复使用相同的媒体持有者<div>元素。

在下面的代码中，that.media_hld始终引用相同的元素。

var media_holder = that.media_hld;
media_holder.textContent = "<img src="+e.getAttribute('src')+">";
docfrag.appendChild(media_holder);

如果您克隆节点它应该工作，您还需要设置innerHTML属性，而不是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);
};

如何使用DocumentFragment将多个元素附加到div

1 个答案: