Заменить все элементы другим jquery

Question

Заменить все элементы другим jquery

0

Я написал этот простой JS-модуль, который заменяет все элементы, имеющие конкретный атрибут data с выпадающим элементом. Например: если у меня есть это:

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

Он будет заменен выпадающим списком. Все работает нормально, т. <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/

Kamran Ahmed 09 нояб. 2013, в 08:19

Источник

Теги:

javascript

jquery

html

dom

2 ответа

0

Пытаться

$(prevEls).replaceWith(function(idx, el){
    return $(el).clone()
})

Arun P Johny 09 нояб. 2013, в 04:26

0

Почему дополнительная function ?
Matt Ball 09 нояб. 2013, в 07:09
0

@MattBall Я удалил .each()
Arun P Johny 09 нояб. 2013, в 07:11

Ещё вопросы

Matt Ball · Accepted Answer · 2013-11-09T05-05-00.000Z

Вам нужно клонировать newEl для каждой замены. В соответствии с документацией replaceWith API:

выбранный элемент заменяет цель, перемещаясь из своего старого местоположения, а не клонируя.

Поэтому, измените свой код примерно так:

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