Question

我正在尝试将一堆菜单下拉列表转换为多个元素。我只能在页面上只有一个下拉菜单时才能这样做，但是一旦我添加其他下拉菜单，我的脚本似乎会多次遍历每个菜单。我是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/

Answer 1

您可以尝试以下代码：

$(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>中的{{1}}。

这是jsfiddle。

Answer 2

下面：

$('a').each,

你正在选择所有元素。我想你只想选择当前li中的那些。所以，只需替换add：

$('a',this).each,

它只会选择一个子元素，例如li元素。

仅将子元素附加到其父元素

HTML

2 个答案: