title: Is it possible to iterate over a Bootstrap list?
body: <p>I have a <code>Twitter Bootstrap</code> list with a variable number of elements (in fact there are two lists with draggable and droppable elements done with <a href="https://github.com/RubaXa/Sortable" rel="nofollow">Sortable.js</a>).</p>
  
  <p>At some point, I want to iterate those lists elements in order to get a <a href="http://html5doctor.com/html5-custom-data-attributes/" rel="nofollow">data atribute</a> from each list entry. This is how my list looks like at HTML:</p>
  
  <pre><code>       &lt;div class="panel-body"&gt;
              &lt;ul id="main_list" class="list-group"&gt;
                  &lt;li id="opt1" href="#" class="list-group-item" data_value="1"&gt;Opt 1&lt;/li&gt;
                  &lt;li id="opt2" href="#" class="list-group-item" data_value="2"&gt;Opt 2&lt;/li&gt;
                  &lt;li id="opt3" href="#" class="list-group-item" data_value="3"&gt;Opt 3&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Is this even possible to achieve, or am I thinking too object oriented? If not, how should I rethink this task?</p>