如何使用DocumentFragment的

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：如何使用DocumentFragment的

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。另一件事，我並不堅持使用文檔片段，如果有更好的方法將多個元素添加到一個元素，我喜歡瞭解它並使用它。

來源

2017-01-05 George Carlin

你需要複製你的'that.media_hld'元素，如果你想添加多個實例。現在，您每次都覆蓋該單個「div」的'textContent'，並且只添加該單個實例。請參閱http://stackoverflow.com/a/921316/215552 –

其中一個問題是您在每次迭代中不斷重複使用相同的媒體持有者<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); 
};

來源

2017-01-05 18:50:50 plalx

如何使用DocumentFragment的

回答

相關問題