只向父元素追加子元素
Append sub-elements to its parent element only
我正在尝试将一堆菜单下拉菜单转换为多个元素。我已经能够做到这一点,当页面上只有一个下拉菜单,但一旦我添加了其他人,我的脚本似乎通过每个菜单多次运行。我是新的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元素。
相关文章:
- Jasmine-无法将元素追加到DOM
- 将复杂的 SVG 元素追加到选区
- 将同一个元素追加到两个下拉列表中只会导致最后一个元素被追加
- 将元素追加到同级元素
- jQuery向每个元素追加与if语句匹配的内容
- 将一个元素追加到另一个元素的子元素中
- 使用 jquery 将数据值从父元素追加到子元素
- 如何将元素追加到动态生成的元素
- 不能将元素追加到表单数据
- 将元素追加到调用createElement()函数的父级
- 可以't使用jQuery将元素追加到html中
- 如何提取json数据,并通过js为每个拆分元素追加
- 如何在JQuery中将元素追加到动态字段中
- 使用Javascript/jQuery将已存在的元素追加到DOM中
- 按相同顺序将数组元素追加到另一个数组
- 仅为第一个元素追加
- 无法't在Angularjs/Jquery中将span元素追加到数组对象中
- jQuery:将元素追加到inputfield并移除
- Chrome扩展:将元素追加到DOM中没有立即出现的新注入的元素中
- 限制元素追加的数量