1

我编写了这段代码来用下拉列表替换具有特定数据属性的页面的所有元素。假设我有：

<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;
4

1 回答 1

2

您不能设置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% 保证我的代码符合你的目的......

于 2013-11-07T13:29:35.073 回答