Question

大家好我在1页上有几个导航，看起来像这样：

<div class="menu">
 <ul>
  <li>link here</li>
 <li>Link Here</li>
</div>

我在一页上有2或3个。

我很难让他们进入jquery中的select和options框。

如果我在页面上只有1个，那么它可以100％工作，但因为我在页面上有2个或3个，有时它只会将第一个菜单输入到所有下拉选择框中。

这是jquery：

jQuery("<select />").appendTo(".menu");
    jQuery("<option />", {"selected": "selected","value"   : "","text" : "Navigation Menu"}).appendTo(".menu select");
    jQuery(".menu ul li a").each(function() {

        var el = jQuery(this);
        jQuery("<option />", {"value"   : el.attr("href"),"text"    : el.text()}).appendTo(".menu select");
    });

    jQuery(".menu select").change(function() {

        window.location = jQuery(this).find("option:selected").val();
    });

我知道它的意思是看起来像这样，但它只是抛出错误。

jQuery("<select />").appendTo(".menu");
    jQuery("<option />", {"selected": "selected","value"   : "","text" : "Navigation Menu"}).appendTo(".menu select");

    var showlis = 'ul li a';
    jQuery(this + showlis).each(function() {

        var el = jQuery(this);
        jQuery("<option />", {"value"   : el.attr("href"),"text"    : el.text()}).appendTo(".menu select");
    });

    jQuery(".menu select").change(function() {

        window.location = jQuery(this).find("option:selected").val();
    });

Answer 1

您需要单独引用每个.menu项目，而不是仅通过课程引用它。

以下代码的作用是：

对于DOM（页面）中的每个.menu


创建<select>并将其附加到其上

添加默认的<option>元素

循环<li>以及<option>
内的相应<select>

演示： http://jsfiddle.net/5dm37/

<强>代码：

$('.menu').each(function() {
    var menu = $(this);
    var sel = $("<select />").appendTo(menu);
    $("<option />", {
        "selected": "selected",
        "value": "",
        "text": "Navigation Menu"
    }).appendTo(sel);
    menu.find('li').each(function() {
        $("<option />", {
            "value": $(this).attr("href"),
            "text": $(this).text()
        }).appendTo(sel);
    });
    sel.change(function() {
        alert($(this).val());    
    });
});

Answer 2

clone之外的所有jQuery操作函数都会移动元素。

http://api.jquery.com/category/Manipulation/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DManipulation%26redirect%3Dno

这意味着对于每个菜单类div，您需要创建一个新元素。创建一个元素会将其附加到第一个菜单类div。

EX：

$(".menu").each( function(index, element) {
    //Create select and options here
    $(element).append(SELECT);
});

Answer 3

我注意到的一些事情：

不确定是否只是复制粘贴错误，但在导航菜单中，您没有关闭<ul>标记。这是无效的HTML。
这可能是您的问题。您正在将新的<select />标记附加到使用jQuery选择器.menu找到的元素。该选择器将所有元素与menu类匹配。它不知道哪个元素与您尝试将其附加到菜单类，因此可能每次都将它附加到第一个。您需要缩小选择范围。执行此操作的最佳方法可能是为每个导航<div>添加id属性，并将其用作选择器。
我很困惑你为什么要这么做。您已经有了导航列表，为什么还要在其中放下下拉列表？

无法获取所有菜单＆gt;李在jquery

3 个答案: