javascript - 将所有元素替换为另一个 jquery

Question

我编写了这个简单的 JS 模块，它替换了具有特定 data 的所有元素。带有下拉元素的属性。例如:如果我有这个:

<span class="testclass1 testclass2" data-what="itemBox"></span>

它将被下拉菜单取代。一切正常，即从 span 转换正在完成元素，以防只有一个 <span class="testclass1 testclass2" data-what="itemBox"></span>但如果我添加多个 span具有 data-what="itemBox" 的元素只有其中之一elements被替换，而其他人则没有。这是我编写的 JS 模块:

(function(){

var mould = {

    partyBox        :   $.parseHTML('<select name="mouldedParty"><option value="-1" selected disabled>Select Party</option></select>'),
    iBox            :   $.parseHTML('<select name="mouldedItem"><option value="-1" selected disabled>Select Item</option></select>'),

    itemCSS     :    {
                        'padding'    : '10px',
                        'border'     : '1px solid #ccc',
                        'background' : 'whitesmoke',
                        'color'      : '#2d2d2d',
                        'cursor'     : 'pointer'
                      },        

    partyCSS    :     {
                        'padding'    : '10px',
                        'border'     : '1px solid #ccc',
                        'background' : '#368EE0',
                        'color'      : 'white',
                        'cursor'     : 'pointer'
                      },

    init            :   function (){ },

    process         :   function (container) {
                            mould.mouldParty(container);
                            mould.mouldItems(container);                            
                        },

    mouldParty      :  function(container){
                            var pBox     = $(mould.partyBox);
                            var pBoxes   = $(container).find('[data-what=partyBox]');

                            pBox.css(mould.partyCSS);
                            mould.replaceAllWith(pBoxes, pBox);
                        },

    mouldItems      :  function(container){
                            var iBox     = $(mould.iBox);
                            var iBoxes   = $(container).find('[data-what=itemBox]');

                            iBox.css(mould.itemCSS);
                            mould.replaceAllWith(iBoxes, iBox);
                        },                          

    replaceAllWith  :   function(prevEls, newEl){
                            $(prevEls).each(function(index, elem){
                                $(elem).replaceWith(newEl);
                            });         
                        }
};

mould.process('body');

})();

谁能告诉我代码有什么问题吗？为什么我已经编写了替换所有元素的代码而只替换了一个元素？

JSFiddle 在这里:http://jsfiddle.net/DK2pe/1/

更新:向 fiddle http://jsfiddle.net/DK2pe/2/ 添加了评论

Answer 1

您需要为每次替换克隆newEl。根据the replaceWith API documentation:

the selected element replaces the target by being moved from its old location, not by being cloned.

因此，大致如下更改您的代码:

replaceAllWith  :   function(prevEls, newEl){
                        $(prevEls).each(function(index, elem){
                            $(elem).replaceWith(newEl.clone());
                        });         
                    }