I have a Twitter Bootstrap list with a variable number of elements (in fact there are two lists with draggable and droppable elements done with Sortable.js).

At some point, I want to iterate those lists elements in order to get a data atribute from each list entry. This is how my list looks like at 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>

Is this even possible to achieve, or am I thinking too object oriented? If not, how should I rethink this task?

I have a Twitter Bootstrap list with a variable number of elements (in fact there are two lists with draggable and droppable elements done with Sortable.js).

At some point, I want to iterate those lists elements in order to get a data atribute from each list entry. This is how my list looks like at 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>

Is this even possible to achieve, or am I thinking too object oriented? If not, how should I rethink this task?

• javascript
• html
• twitter-bootstrap
• custom-data-attribute

• Well... you could return all attributes using .attributes or .getAttribute('data-attribute-name'), and, you could do that on .onEnd, onAdd, etc; using your function to return what you want. – klauskpm Commented Jan 12, 2015 at 12:39
• What is a „bootstrap list“? If you mean the Twitter Bootstrap please name accordingly and point to the type of content elements you've used… – feeela Commented Jan 12, 2015 at 12:41
• @feeela Didn't know there is any other bootstrap than Twitter Bootstrap... I have updated to include my HTML code for the list – Roman Rdgz Commented Jan 12, 2015 at 12:48
• @RomanRdgz A bootstrap file generally referred to as a file that loads and configures an application. A typical use-case for a PHP boostrap file would be to connect to a database or set a timezone. If you use Twitter Bootstrap you don't have to repeat mon things like grid- or form-styling. Thus that is a bootstrap… – feeela Commented Jan 12, 2015 at 13:44

2 Answers 2

You can put your specific information like

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

and get that easily with jquery:

$("#opt3").data("value")

But the semantic way to do that is with "-" instead of "_".

To iterate your list, you can do:

$("#main_list li").each(function(){
  var itemValue = $(this).data('id');
  var itemName = $(this).data('name');
  alert(itemValue+" - " +itemName);
});

<script src="https://ajax.googleapis./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's answer is totally valid, and if jQuery is already used then it should be the accepted answer. But for the sake of it here is a solution in plain 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
}

You could wrap that in a function and call it on click for example. Here is a demo to see it in action: http://jsfiddle/Lzcbzq7x/1/