jquery - 使用jQuery将无序列表菜单转换为下拉菜单时如何添加ID

Question

我正在尝试创建一个响应式布局，其中导航链接在特定屏幕尺寸下变成下拉菜单。我正在使用此处找到的以下代码：

$(function() {
$('ul.selectdropdown').each(function() {
    var $select = $('<select />');

    $(this).find('a').each(function() {
        var $option = $('<option />');
        $option.attr('value', $(this).attr('href')).html($(this).html());
        $select.append($option);
    });

    $(this).replaceWith($select);
});
});

它按我想要的方式工作。但是，它不保留列表项最初具有的 ID。我想保留原始 ID，或者为创建的每个选项输出一个唯一 ID。

有没有简单的方法来实现这一点？

Answer 1

您似乎没有将 id 分配给新创建的options. 以下代码假设<li>元素具有 id，而不是<a>.

改变

$option.attr('value', $(this).attr('href')).html($(this).html());

至

$option.attr('value', $(this).attr('href')).html($(this).html()).attr('id', $(this).parent().attr('id'));