我有一个Twitter Bootstrap
列表,其中包含可变数量的元素(实际上有两个列表,其中可拖动和可放置的元素使用Sortable.js完成)。
在某些时候,我想迭代这些列表元素,以便从每个列表条目中获取data atribute。这就是我的列表在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>
这是否有可能实现,或者我是否认为过于面向对象?如果没有,我该如何重新考虑这个任务呢?
答案 0 :(得分:3)
您可以输入您的具体信息,例如
<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>
答案 1 :(得分:2)
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/