Question

我有一个JavaScript函数，它合并了一个在DOM中不是YET的html剪切，例如

<div class="one two"><input /><span name="abc">Text</span></div>

带有DOM节点/标签

<div id="aaa" class="another"></div>

结果是：

<div id="aaa" class="one two another"><input /><span name="abc">Text</span></div>

我想改进这个功能。

到目前为止，我执行以下操作：

它接受第一个源标记的class属性并将其与目标合并：

classes = $(source).first().attr("class");
this.addClass(classes);

它将源子标记附加到目标：

this.append($(source).first().children());

现在我要添加到此功能：

   Take all attribute (not "class") of the first source tag and add it to the
   first target tag (overwrite if it exists).

问题是，我不能使用“属性”，因为源剪切还没有在DOM中。到目前为止我所拥有的解决方案并不是很漂亮：对于每个非常常见的属性，我都有一个额外的行：

tabindex = $(source).first().attr("tabIndex");
this.attr("tabIndex", tabindex);

wrap = $(source).first().attr("wrap");
this.attr("wrap", wrap);

有人知道如何获取这样一个html片段（第一个标签）的所有属性吗？

更新

当然我可以交换源和目标：

使用“attributes”读取目标DOM标记的所有属性。
将这些属性添加到代码段的第一个标记中，该标记尚未包含在DOM中。
用html代码段替换DOM代码。

但是有更优雅的解决方案吗？

Answer 1

您应该能够通过从实际DOM对象访问片段来轻松读取片段中的属性：

var $target = $('#aaa');
$source = $('<div class="one two"><input /><span name="abc">Text</span></div>');

// iterate over attributes of $source
// we use $source.get(0) to get the DOM fragment itself
for (var i = 0, attributes = $source.get(0).attributes, item; item = attributes[i]; ++i) {
    if (item.name == 'class') {
        // special case for class
        $target.addClass(item.nodeValue);
    } else {
        // otherwise overwrite attribute of target with source
        $target.attr(item.name, item.nodeValue);
    }
}
// finally append the children from source
$target.append($source.children());

标签中尚未包含在DOM中的所有属性

1 个答案: