Question

我编写了这段代码，用一个下拉列表替换具有特定数据属性的页面的所有元素。让我们说如果我有：

<span data-what="partyBox"></span>

它将被替换为下拉列表。代码运行良好但有例外;稍后，我想分配当前标记的所有属性（例如所有数据属性或任何其他指定的属性），即在这种情况下span标记将分配给我创建的下拉列表。但我有问题要达到这一点，即它不会将所有这些属性应用于下拉列表。这是我的代码：

var mould = {

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

    init            :   function (){ },

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

                            pBox.css({
                                'padding'    : '10px',
                                'border'     : '1px solid #ccc',
                                'background' : '#368EE0',
                                'color'      : 'white',
                                'cursor'     : 'pointer'
                            });

                            $(pBoxes).each(function(index, elem){
                                var attributes = elem.attributes;
                                var test = $(elem).replaceWith(pBox);
                                test.attributes = attributes;

                            });

                            // pBoxes.replaceWith(pBox);

                        }
};

mould.process('body');

有人可以告诉我这段代码有什么问题吗？为什么不将span标记的所有属性应用于下拉列表，尽管我已将这些行用于替换

            var attributes = elem.attributes;
            var test = $(elem).replaceWith(pBox);
            test.attributes = attributes;

Answer 1

您无法设置元素的attributes属性。您所能做的就是将属性从一个元素复制到另一个元素。

这样的代码可能是一个解决方案：

$(pBoxes).each(function (index, elem) {
    var newBox = pBox.clone(true, true)[0]; // get a simple DOM element

    // loop through the old element's attributes and give them to the new element
    for (var name in elem.attributes) {
        newBox.setAttribute(name, elem.attributes[name].value);
    }

    // replace the old element with the new one
    var test = $(elem).replaceWith(newBox);
});

我承认我发现你的代码有点混乱，所以我不能100％保证我的代码符合你的目的......

将元素的所有属性分配给另一个元素

1 个答案: