只向父元素追加子元素

Append sub-elements to its parent element only

本文关键字：元素 追加      更新时间：2023-09-26

我正在尝试将一堆菜单下拉菜单转换为多个元素。我已经能够做到这一点，当页面上只有一个下拉菜单，但一旦我添加了其他人，我的脚本似乎通过每个菜单多次运行。我是新的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>，稍后可以使用select.append()将<option>添加到该变量中。

和使用$(this).find('a')代替$('a')找到<a>在某些<li>，但不是所有的<a>。

此处:

$('a').each,

选择了所有的a元素。我认为你只需要选择当前列表中的那些。所以，只需替换add:

$('a',this).each,

它将只选择它的子元素，例如li元素。

相关文章：