2

我正在尝试将一堆菜单下拉菜单转换为多个元素。当页面上只有一个下拉菜单时，我已经能够做到这一点，但是一旦我添加了其他下拉菜单，我的脚本似乎会多次运行每个菜单。我是 Javascript/Jquery 的新手，但我想知道是否有办法让它只输入到其父元素？

这是我当前适用于单个下拉列表的脚本：

$('.mylinks li').each(function() {
  var inputClass = $('.mylinks .link').html().toLowerCase();
  $('body').prepend('<select class="'+inputClass+'" onchange="window.location.href=this.options[this.selectedIndex].value"></select>');
  $('a').each(function() {

    var linkName = $(this).html();
    var linkVal = $(this).attr('href');
    $('select').append('<option value="'+linkVal+'">'+linkName+'</option>');
  
  });
});

HTML

<div class="mylinks">
  <ul>
    <li>
        <a href="#">Drop 1</a>
        <a href="http://geartrade.com">Link 1</a>
        <a href="http://geartrade.com">Link 2</a>
        <a href="http://geartrade.com">Link 3</a>
    </li>
    <li>
        <a href="#">Drop 2</a>
        <a href="http://geartrade.com">Link 1</a>
        <a href="http://geartrade.com">Link 2</a>
        <a href="http://geartrade.com">Link 3</a>
    </li>
  </ul> 
 </div>

我在这里也有一个这个错误的例子：http: //jsfiddle.net/UdTcF/

4

2 回答 2

3

你可以试试这段代码：

$(document).ready(function () {

    $('.mylinks li').each(function () {
        var inputClass = $('.mylinks a').html().toLowerCase();
        var select = $('<select class="' + inputClass + '" onchange="window.location.href=this.options[this.selectedIndex].value"></select>');
        $('body').prepend(select);
        $(this).find('a').each(function () {
            var linkName = $(this).html();
            var linkVal = $(this).attr('href');
            select.append('<option value="' + linkVal + '">' + linkName + '</option>');
        });
    });

});

使用变量select来保存<select>要添加的内容，后期可以<option>使用select.append().

并使用$(this).find('a')而不是在某些但不是全部$('a')中查找。<a><li><a>

这是jsfiddle。

于 2013-03-14T02:34:39.383 回答
0

这里：

$('a').each,

您正在选择所有 a 元素。我认为您只想选择当前 li 中的那些。所以，只需替换添加：

$('a',this).each,

它将仅选择作为 this 子元素的元素，例如 li 元素。

于 2013-03-14T02:53:33.770 回答