Использование jQuery для получения неизвестных атрибутов данных и копирования их в новый элемент

0

Я пытаюсь создать пользовательский стиль выбора раскрывающегося списка, преобразовывая стандартный вид формы в список <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> без указания их по имени?

  • 1
    Включается ли требование все attributes из option или только data- ? Спасибо
  • 0
    @ guest271314 - Полагаю, сейчас мне интересны только атрибуты data-
Показать ещё 1 комментарий
Теги:

3 ответа

1
Лучший ответ

Просто клонируйте узел:

jQuery('.fancy-select .field option').each(function(){
    this.parentNode.appendChild(this.cloneNode());
});

Так как это ваниль и DOM-манипуляция вместо манипуляции с строкой, это будет намного быстрее. И это тоже хорошо и просто.

скрипка

Но вы хотите, чтобы он был <li>, а не <option>? Вы можете изменить внешнийHTML, но более быстрый способ:

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

Вместо клонирования всего узла, а затем выполняя дорогостоящую замену externalHTML, он просто копирует атрибуты один за другим!

скрипка

  • 0
    Почему отрицательный голос?
  • 0
    Где написано «только атрибуты данных»? И parentNode подходит для этого конкретного случая. Опции находятся в select, других элементов кроме option и select нет.
Показать ещё 10 комментариев
3

Прошло некоторое время с тех пор, как я использовал jQuery, но сначала я подумал, что нужно искать атрибуты, которые ищут "data-".

Что-то вроде:

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

Быстрый Google показывает, что data() может сделать этот код намного проще, если вы используете более новую версию jQuery - 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 );
});
  • 0
    Спасибо Джейк, это похоже на то, что я преследовал. Я принял другое решение, но +1 от меня за помощь :)
1

Попробуйте это (шаблон)

html (например)

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

JS

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>");

jsfiddle http://jsfiddle.net/guest271314/9NvJm/

  • 0
    Спасибо guest271314 - это работает. Я принял ответ bjb568, так как он тоже работает, и я могу принять только один ответ. +1 от меня хоть :)
  • 0
    Я только что видел, что ваш jsfiddle на самом деле не копирует атрибуты данных в <li> .
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню