Я пытаюсь создать пользовательский стиль выбора раскрывающегося списка, преобразовывая стандартный вид формы в список <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>
без указания их по имени?
Просто клонируйте узел:
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, он просто копирует атрибуты один за другим!
Прошло некоторое время с тех пор, как я использовал 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 );
});
Попробуйте это (шаблон)
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>");
<li>
.
attributes
изoption
или толькоdata-
? Спасибоdata-