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

我正在尝试将一堆菜单下拉列表转换为多个元素。当页面上只有一个下拉菜单时，我就可以做到这一点，但是一旦我添加了其他下拉菜单，我的脚本似乎会在每个菜单中运行多次。我是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/

最佳答案

您可以尝试以下代码：

$(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>，late可以使用<option>将select.append()添加到此变量。
使用$(this).find('a')而不是$('a')来查找特定的<a>中的<li>，但不是所有的<a>。
这里是jsfiddle。