0

大家好，我在 1 页上有一些导航，如下所示：

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

我在一页上有 2 或 3 个。

我很难让它们进入 jquery 中的选择和选项框。

如果我在一个页面上只有 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();
    });
4

3 回答 3

3

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

下面的代码的作用是：

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

  1. 创建并附加 a<select>到它上面
  2. 添加默认<option>元素
  3. 循环遍历<li>s 和对应<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());    
    });
});
于 2012-10-01T15:35:34.383 回答
0

我注意到几点：

  1. 不确定这是否只是复制粘贴错误，但在您的导航菜单中，您没有结束<ul>标记。这是无效的 HTML。
  2. 这很可能是你的问题。您正在将新<select />标签附加到使用 jQuery 选择器找到的元素上.menu。该选择器将所有元素与menu该类匹配。它不知道您尝试将其附加到菜单类的哪个元素，因此它可能只是每次都将其附加到第一个元素。您需要缩小选择器的范围。做到这一点的最好方法可能是给每个导航<div>一个id属性并将其用作您的选择器。
  3. 我很困惑你为什么要这样做。您已经有了导航列表，为什么还要在其中放置下拉列表？
于 2012-10-01T15:36:58.767 回答
0

克隆移动元素之外的所有 jQuery 操作函数。

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

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

前任：

$(".menu").each( function(index, element) {
    //Create select and options here
    $(element).append(SELECT);
});
于 2012-10-01T15:31:28.807 回答