是否可以遍历引导程序列表
Is it possible to iterate over a Bootstrap list?
我有一个Twitter Bootstrap
列表,其中包含可变数量的元素(实际上有两个列表,其中包含使用Sortable.js完成的可拖动和可放置元素)。
在某些时候,我想迭代这些列表元素,以便从每个列表条目中获取数据。这是我的列表在HTML中的样子:
<div class="panel-body">
<ul id="main_list" class="list-group">
<li id="opt1" href="#" class="list-group-item" data_value="1">Opt 1</li>
<li id="opt2" href="#" class="list-group-item" data_value="2">Opt 2</li>
<li id="opt3" href="#" class="list-group-item" data_value="3">Opt 3</li>
</ul>
</div>
这是否有可能实现,还是我的想法过于面向对象?如果没有,我应该如何重新考虑这项任务?
你可以把你的具体信息,比如
<li id="opt3" href="#" class="list-group-item" data-value="3">Opt 3</li>
并且使用jQuery可以轻松获得:
$("#opt3").data("value")
但是这样做的语义方法是使用"-"而不是"_"。
要迭代您的列表,您可以执行以下操作:
$("#main_list li").each(function(){
var itemValue = $(this).data('id');
var itemName = $(this).data('name');
alert(itemValue+" - " +itemName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
<ul id="main_list" class="list-group">
<li id="opt1" href="#" class="list-group-item" data-name="customname1" data-id="1">Opt 1</li>
<li id="opt2" href="#" class="list-group-item" data-name="customname2" data-id="2">Opt 2</li>
</ul>
</div>
Thiago的答案是完全有效的,如果jQuery已经被使用,那么它应该是公认的答案。但为了这个起见,这里有一个普通 js 的解决方案:
var elements = document.getElementById('main_list').children,
maxElements = elements.length,
counter = 0,
tmpAttribute;
for (; counter < maxElements; counter++) {
tmpAttribute = elements[counter].getAttribute('data_value');
// whatever you need to do with tmpAttribute
}
例如,您可以将其包装在一个函数中并在单击时调用它。下面是一个演示,可以看到它的实际效果:http://jsfiddle.net/Lzcbzq7x/1/
相关文章:
- 如何保持引导程序下拉复选框列表下拉
- Twitter引导程序在下拉列表打开时停止传播
- jQuery,引导程序下拉列表问题
- 引导程序下拉列表显示不正确
- 引导程序在单击另一个下拉列表时关闭下拉列表
- 引导程序选择下拉列表
- 引导程序的下拉列表不起作用
- 引导程序 3 下拉列表不会更新
- 用angularjs填充引导程序下拉列表
- 表详细信息中的引导程序下拉列表
- 使用引导程序时无法禁用下拉列表
- 如何更改引导程序多选下拉列表的高度和字体大小
- 引导程序多选下拉列表不是下拉列表
- 如果字符串位于iframe之后,则不会使用引导程序列表显示
- 引导程序下拉列表与jQuery.dropdown冲突
- 将数据绑定添加到引导程序下拉列表
- 引导程序中的单个日期、月份和年份下拉列表
- 需要使用引导程序的列表组制作“幻灯片”
- 是否可以遍历引导程序列表
- 引导程序 3 中的导航栏下拉列表