是否可以遍历 Bootstrap 列表？答案

【问题标题】：Is it possible to iterate over a Bootstrap list?是否可以遍历 Bootstrap 列表？
【发布时间】：2015-03-10 05:21:54
【问题描述】：

我有一个 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>

这甚至可能实现，还是我认为太面向对象？如果没有，我应该如何重新考虑这项任务？

【问题讨论】：

嗯...您可以使用.attributes 或.getAttribute('data-attribute-name') 返回所有属性，并且您可以在.onEnd、onAdd 等上执行此操作；使用你的函数返回你想要的。
什么是“引导列表”？如果您指的是 Twitter Bootstrap，请相应命名并指出您使用的内容元素的类型……
@feeela 不知道除了 Twitter Bootstrap 之外还有其他引导程序...我已更新以包含列表的 HTML 代码
@RomanRdgz 引导文件，通常称为加载和配置应用程序的文件。 PHP boostrap 文件的典型用例是连接到数据库或设置时区。如果您使用 Twitter Bootstrap，则不必重复常见的事情，如网格或表单样式。因此，这是一个引导程序……

标签： javascript html twitter-bootstrap custom-data-attribute

【解决方案1】：

你可以把你的具体信息像

<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>

【讨论】：

【解决方案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/

【讨论】：