遍历列表,从列表项文本中添加列表项id
Iterate through list, add list item id from list item text
我想找到一个简单的jQuery解决方案来迭代列表的子选择器,在这个例子中,ul>li span span子选择器,找到文本,将文本复制为列表项ID,同时删除空白并替换为下划线(例如,在下面的示例中,HR区域将变为HR_Area,然后添加为列表项ID,如li ID="HR_Area")。
<ul id="menu">
<li><a href="/"><span class="additional-background"><span class="menu-item">Staff</span></span></a>
<ul>
<li><a href="directory.asp">Directory</a></li>
</ul>
</li>
<li><a href="/"><span class="additional-background"><span class="menu-item">HR Area</span></span></a>
<ul>
<li><a href="vacation.asp">Manage Vacation Time</a></li>
</ul>
</li>
</ul>
提前Thx。
这将只选择#菜单中的即时li。我希望这是你所期望的。
$(document).ready(function() {
$("#menu>li .menu-item").each(function() {
$(this).closest("li").attr("id", $(this).text().split(' ').join('_'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
<li>
<a href="/">
<span class="additional-background">
<span class="menu-item">Staff</span>
</span>
</a>
<ul>
<li><a href="directory.asp">Directory</a>
</li>
</ul>
</li>
<li>
<a href="/">
<span class="additional-background">
<span class="menu-item">HR Area</span>
</span>
</a>
<ul>
<li><a href="vacation.asp">Manage Vacation Time</a>
</li>
</ul>
</li>
</ul>
只需迭代一个li的直属子项。然后访问跨度,用下划线替换空格,并相应地设置id。
// Iterate over the immediate li elements for the ul
$('#menu > li').each(function(elem) {
var $this = $(this);
// Access the span element
var $span = $('.menu-item', $this),
spanText = $span.text(),
// Replace space with underscore
replacedText = spanText.split(' ').join('_');
// Set the id of for the li element
$this.attr('id', replacedText);
});
$('#menu > li').each(function(elem) {
console.log($(this).attr('id'));
});
检查Fiddle
试试这个:-
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#menu").find("li").each(function(){
$(this).find("span").each(function(){
var txt = $(this).html();
txt = txt.replace(" ","_");
$(this).closest("li").attr("ID",txt);
});
});
});
</script>
</head>
<body>
<ul id="menu">
<li><a href="/"><span class="additional-background"><span class="menu-item">Staff</span></span></a>
<ul>
<li><a href="directory.asp">Directory</a></li>
</ul>
</li>
<li><a href="/"><span class="additional-background"><span class="menu-item">HR Area</span></span></a>
<ul>
<li><a href="vacation.asp">Manage Vacation Time</a></li>
</ul>
</li>
</ul>
</body>
</html>
相关文章:
- 在Javascript中使用JQueryMobile向列表添加项目
- 角度 - 需要向选择下拉列表添加多个占位符
- Javascript:如何为列表添加价值并使其即时更新
- 如何为我的嵌入YouTube播放列表添加Facebook共享按钮
- 如何允许用户将播放列表添加到单个 YT 帐户
- 将值列表添加到值本身,不包括其自身的值
- 将多个英国邮政编码列表添加到谷歌地图
- 如何使用 JavaScript 将下拉列表添加到<跨度>
- 下划线模板,将列表添加到单个数组中
- 如何将地址列表添加到地图一侧
- 可以通过Javascript将选择下拉列表添加到我的winJS工具栏中吗?
- 如何将选择列表添加到自定义实体的案例表单中(注意:替换普通查找字段)
- 使用下拉列表添加/删除搜索框
- 如何使用zip.js将图像文件列表添加到zip文件中
- 如何在jQuery中向不同的下拉列表添加不同的前缀
- 如何在单击时以编程方式将网页列表添加到浏览器收藏夹中
- 单击按钮将下拉列表添加到新行
- 为每个从特定数字开始的x列表添加边框
- 在使用javascript向下拉列表添加项目并运行服务器端代码后,无效的回发或回调参数
- 选择Jplayer播放列表添加复选框