是否可以迭代Bootstrap列表？

我有一個Twitter Bootstrap列表與可變數量的元素（實際上有兩個列表與可拖動和droppable元素與Sortable.js完成）。是否可以迭代Bootstrap列表？

在某些時候，我想遍歷這些列表元素，以便從每個列表條目中獲得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>

這是甚至可能實現的，還是我認爲太面向對象？如果不是，我應該如何重新考慮這個任務？

來源

2015-01-12 Roman Rdgz

那麼......你可以使用'.attributes'或'.getAttribute（'data-attribute-name'）'返回所有的屬性，你可以做到這一點'.onEnd'，'onAdd'等;使用你的函數返回你想要的。 – klauskpm

什麼是「引導列表」？如果您的意思是Twitter Bootstrap，請相應地命名並指出您使用的內容元素的類型... – feeela

@feeela不知道有任何其他引導程序比Twitter Bootstrap ...我已更新以包含我的HTML代碼列表 –

你可以使用jQuery把您的具體信息，如

<li id="opt3" href="#" class="list-group-item" data-value="3">Opt 3</li>

和獲取容易：

$("#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>

來源

2015-01-12 12:53:09 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/

來源

2015-01-12 13:08:02 Ben

是否可以迭代Bootstrap列表？

回答

相關問題