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

Replace all elements with another jquery

本文关键字：另一个 jquery 替换 元素      更新时间：2023-09-26

我编写了这个简单的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/

更新：在小提琴 http://jsfiddle.net/DK2pe/2/中添加了评论

您需要为

每次替换克隆newEl。根据 replaceWith API 文档：

所选元素通过从其旧位置移动而不是通过克隆来替换目标。

因此，大致按如下方式更改代码：

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

尝试

$(prevEls).replaceWith(function(idx, el){
    return $(el).clone()
})
相关文章：