javascript - 使用 jQuery 获取未知数据属性并将其复制到新元素

Question

我正在尝试通过将标准表单选择转换为 <li> 来创建自定义下拉选择样式。列表，但是我需要添加一些 -data每个 <option> 的属性然后需要将其复制到 <li> 。

问题是我并不总是知道这些数据属性将被调用什么，因此我想要一种仅从 <option> 复制任何数据属性的方法。标记到 <li>标签。

我当前的代码如下:

原<option>标签...

<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>')
});

有没有办法将所有数据属性从我的选项标记复制到 <li>标签而不按名称指定它们？

Answer 1

自从我使用 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，data() 可能会使此代码变得更加简单 - https://api.jquery.com/jQuery.data/

jQuery('.fancy-select .field option').each(function(){
    var $li = jQuery( '<li><a href="">' + jQuery(this).text() + '</a></li>' );
    jQuery.each( jQuery(this).data(), function ( key, value ) {
        $li.data( key, value );
    } );

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