1

我正在基于预先存在的 UL 为移动设备构建一个选择下拉菜单，这适用于旧版本的 jQuery（1.4.1）。但是，我已将 jQuery 更新到 1.9.1 版，代码现在破坏了菜单。正在中断的部分实际上是您当前正在查看的部分的子菜单。

var mobileMenu = function (menuParent, prevSibling) {

    var $select = $('<select>', {
        class: 'mobileMenu'
    }).insertAfter(prevSibling);

    $(menuParent).each(function () {
        var $li = $(this),
            $a = $li.find('> a'),
            $p = $li.parents('li'),
            prefix = new Array($p.length + 1).join('-');

        var $option = $('<option>')
            .text(prefix + ' ' + $a.text())
            .val($a.attr('href'))

        if ($(this).hasClass("selected")) {
            $option.attr('selected', true);
        }

        $option.appendTo($select);

        if ($(this).hasClass("selected")) {
            mobileSubNav($select);
        }

    });

    $(".mobileMenu").change(function () {
        window.location = $(this).find("option:selected").val();
    });
};

var mobileSubNav = function (navContainerName) {
    $('.main_nav_sub li').each(function () {
        var $li = $(this),
        $a = $li.find('> a'),
        $p = $li.parents('li'),
        prefix = new Array($p.length + 1).join('-');

        var $option = $('<option>')
        .text(prefix + '--' + $a.text())
        .val($a.attr('href'));
        $option.before(navContainerName);
    });
}

它似乎是倒数第三行 - before() 方法。我在 jQuery 版本 1.9 的升级指南中看到它声明“尝试在没有父节点的节点上使用 .after()、.before() 或 .replaceWith() 无效”。这是否意味着我的脚本正在中断，因为父元素尚未添加到 dom 中？谁能阐明正在发生的事情并指出我要解决的问题？

谢谢

4

1 回答 1

0

与 1.4.1 相比，这里需要更改很多东西。一定要使用 jQuery Migrate，它会帮助你找到很多。

class: 'mobileMenu'

这在某些浏览器上一直是一个错误，不管 jQuery，你需要引用这个词class，因为它是一个关键字：

'class': 'mobileMenu'

自 1.6 起已弃用.attr()用于设置属性，因此应.prop()改为：

$option.attr('selected', true);

关于您的问题，.before()我不确定为什么它首先会起作用。似乎navContainerName是选择元素，如果是，您应该使用.appendTo()或.prependTo()添加选项。

于 2013-04-05T12:11:40.943 回答