Javascript 使用jQuery获取未知数据属性并将它们复制到新元素

我试图通过将标准表单选择转换为

列表来创建自定义下拉选择样式，但是我需要向每个

添加一些

-data

属性，然后需要将这些属性复制到

问题是，我并不总是知道这些数据属性将被调用，因此我想要一种将任何数据属性从

标记复制到

标记的方法

我目前的代码如下：

原始

标签

<option data-somedata="something" data-else="something else" value="some value">Hello</option>

你好 而jQuery

jQuery('.fancy-select .field option').each(function(){
  jQuery(this).parents('.fancy-select').find('ul').append('<li><a href="">' + jQuery(this).text() + '</a></li>')
});

jQuery（'.select.field选项'）。每个（函数（）{
jQuery（this）.parents（'.fancy select'）.find（'ul'）.append（'
'））
});

是否有一种方法可以将所有数据属性从我的选项标记复制到

标记，而不通过名称指定它们？

只需：

因为这是一个简单的操作，DOM操作而不是字符串操作，所以速度会快得多。它也很好，很简单

但是您希望它是一个

，而不是

？您可以更改outerHTML，但更快的方法是：

jQuery('.fancy-select .field option').each(function() {
    var newNode = document.createElement('li');
    for (var i = this.attributes.length - 1; i--;) {
        newNode.attributes.setNamedItem(this.attributes[i].cloneNode());
    }
    this.parentNode.parentNode.appendChild(newNode);
});

它不是克隆整个节点，然后进行昂贵的outerHTML替换，而是一个接一个地复制属性

只要：

因为这是一个简单的操作，DOM操作而不是字符串操作，所以速度会快得多。它也很好，很简单

但是您希望它是一个

，而不是

？您可以更改outerHTML，但更快的方法是：

jQuery('.fancy-select .field option').each(function() {
    var newNode = document.createElement('li');
    for (var i = this.attributes.length - 1; i--;) {
        newNode.attributes.setNamedItem(this.attributes[i].cloneNode());
    }
    this.parentNode.parentNode.appendChild(newNode);
});

它不是克隆整个节点，然后进行昂贵的outerHTML替换，而是一个接一个地复制属性

---

我已经有一段时间没有使用jQuery了，但我的第一个想法是查看属性以查找“数据”属性

比如：

jQuery('.fancy-select .field option').each(function(){
    var $li = jQuery( '<li><a href="">' + jQuery(this).text() + '</a></li>' );
    jQuery.each( this.attributes, function ( item ) {
        if ( item.name.substring(0,6) === "data-" ) {
            $li.attr( item.name, item.value );
        }
    } );

    jQuery(this).parents('.fancy-select').find('ul').append( $li );
});

jQuery（'.select.field选项'）。每个（函数（）{
var$li=jQuery（“
”）；
jQuery.each（this.attributes，function（item）{
if（item.name.substring（0,6）=“data-”）{
$li.attr（item.name，item.value）；
}
} );
jQuery（this）.parents（'.fancy select'）.find（'ul'）.append（$li）；
});

快速浏览谷歌发现，如果您使用的是较新版本的jQuery，data（）可能会使代码更简单

jQuery（'.select.field选项'）。每个（函数（）{
var$li=jQuery（“
”）；
each（jQuery（this）.data（），函数（键，值）{
$li.数据（键、值）；
} );
jQuery（this）.parents（'.fancy select'）.find（'ul'）.append（$li）；
});

我已经有一段时间没有使用jQuery了，但我的第一个想法是查看属性以查找“数据”属性

比如：

jQuery('.fancy-select .field option').each(function(){
    var $li = jQuery( '<li><a href="">' + jQuery(this).text() + '</a></li>' );
    jQuery.each( this.attributes, function ( item ) {
        if ( item.name.substring(0,6) === "data-" ) {
            $li.attr( item.name, item.value );
        }
    } );

    jQuery(this).parents('.fancy-select').find('ul').append( $li );
});

jQuery（'.select.field选项'）。每个（函数（）{
var$li=jQuery（“
”）；
jQuery.each（this.attributes，function（item）{
if（item.name.substring（0,6）=“data-”）{
$li.attr（item.name，item.value）；
}
} );
jQuery（this）.parents（'.fancy select'）.find（'ul'）.append（$li）；
});

快速浏览谷歌发现，如果您使用的是较新版本的jQuery，data（）可能会使代码更简单

jQuery（'.select.field选项'）。每个（函数（）{
var$li=jQuery（“
”）；
each（jQuery（this）.data（），函数（键，值）{
$li.数据（键、值）；
} );
jQuery（this）.parents（'.fancy select'）.find（'ul'）.append（$li）；
});

试试这个（模式）

html（例如）

abc
def

js

功能optdata（选择器、容器、el）{
$。每个（$（选择器）、函数（索引、值）{
$（容器）。附加(
$（el.html（“”）
.data（$（值）.data（））
);
返回（索引！=$（值）.size（））
});
};
optdata（$（“选项”）、$（“.selections”）、“
”；

jshiddle

试试这个（模式）

html（例如）

abc
def

js

功能optdata（选择器、容器、el）{
$。每个（$（选择器）、函数（索引、值）{
$（容器）。附加(
$（el.html（“”）
.data（$（值）.data（））
);
返回（索引！=$（值）.size（））
});
};
optdata（$（“选项”）、$（“.selections”）、“
”；

---

jsfiddle

它在哪里说“仅数据属性”？对于这种特殊情况，parentNode也可以。选项在selects中，除了选项和select之外没有其他元素。bjb568-请放心-我只是在查看parentNode的内容。这不是我比较熟悉的东西，所以我需要在尝试让它工作之前调查一下+但是现在是1（不确定你为什么一开始就被否决了！）。是否接受一次/如果我让它工作，如果可以的话？：）好的，这就是accept按钮的作用（在测试之后，将其标记为工作）。我认为否决票只是让一些用户嫉妒我的解决方案，你知道，是有效的。假设这不仅仅是“数据-”属性——我在重读问题后无法发现要求-+1@Jake这似乎是OP想要的。我的意思是有一个元素，然后OP创建一个新元素。复制是一种有效的方法。它在哪里说“仅数据属性”？对于这种特殊情况，parentNode也可以。选项在selects中，除了选项和select之外没有其他元素。bjb568-请放心-我只是在查看parentNode的内容。这不是我比较熟悉的东西，所以我需要在尝试让它工作之前调查一下+但是现在是1（不确定你为什么一开始就被否决了！）。是否接受一次/如果我让它工作，如果可以的话？：）好的，这就是accept按钮的作用（在测试i之后，将其标记为工作）

<ul class="selections">
    <select>
        <option data-somedata="something" data-else="something else" value="some value">abc</option>
        <option data-somedata="something other" data-else="something else other" value="some value">def</option>
    </select>
</ul>

function optdata(selector, container, el) {
    $.each($(selector), function (index, value) {
        $(container).append(
        $(el).html("<a href=''>" + $(value).html() + "</a>")
        .data($(value).data()) 
        );
        return (index != $(value).size())
    });
};
optdata($("option"), $(".selections"), "<li>");