How to get the separate values from ul li

Question

I want to get the values from the ul li. I am able to get the values but the problem is that my function gets the values of all the list items in the ul. here is my code

<div class = "col-sm-8 col-md-8" align = "center">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter by</span> <span class="caret"></span>
                </button>
                <ul id = "filter" class="dropdown-menu" role="menu">
                  <li><a href="#contains">value one</a></li>
                  <li><a href="#its_equal">value two</a></li>
                  <li><a href="#greather_than">value three</a></li>
                  <li><a href="#less_than">value four</a></li>
                  <li class="divider"></li>
                  <li><a href="#all">value five</a></li>
                </ul>
</div>
</div>
</div>

Here is the JS code

var li = document.getElementById("filter");
var choice = (li.textContent || li.innerText);

Answer 1

You can get elements of a ul using this code

var li = document.getElementById("filter");
var a_elements = li.getElementsByTagName("li");
for (var i = 0, len = a_elements.length; i < len; i++ ) {
   alert(a_elements[ i ].innerText);
}

Answer 2

This piece of Javascript will loop trough the li elements and will retrieve the value for you

var list = document.getElementById("filter");

var items = list.getElementsByTagName("li");
for (var i = 0; i < items.length; ++i) {
  // do something with items[i], which is a <li> element
  console.log(items[i].textContent || items[i].innerText);
}

Answer 3

You can used the jQuery .each

The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.... More

 $(document).ready(function(){ $( "ul#filter li" ).each(function( index ) { console.log( index + ": " + $( this ).text() ); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "col-sm-8 col-md-8" align = "center"> <div class="input-group"> <div class="input-group-btn search-panel"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span id="search_concept">Filter by</span> <span class="caret"></span> </button> <ul id = "filter" class="dropdown-menu" role="menu"> <li><a href="#contains">value one</a></li> <li><a href="#its_equal">value two</a></li> <li><a href="#greather_than">value three</a></li> <li><a href="#less_than">value four</a></li> <li class="divider"></li> <li><a href="#all">value five</a></li> </ul> </div> </div> </div> 

Answer 4

By looking at your HTML markup, it seems that you need the clicked li's text.

You can just add click event listener for each li.

var ul = document.getElementById("filter");
var lis = ul.getElementsByTagName("li");

for(var i=0; i<lis.length; i++) {
  lis[i].addEventListener("click", function(e) {
    alert(this.textContent || this.innerText);
  });
}

Hope this helps.

Answer 5

Use document.querySelectorAll , returns a list of the elements within the document that match the specified group of selectors. The object returned is a NodeList.

The Array.from() method creates a new Array instance from an array-like or iterable object.

 var liElems = document.querySelectorAll('ul#filter li'); var liElemsLikeArr = Array.from(liElems); liElemsLikeArr.forEach(function(elem) { alert(elem.textContent); }); 

 <ul id="filter" class="dropdown-menu" role="menu"> <li><a href="#contains">value one</a> </li> <li><a href="#its_equal">value two</a> </li> <li><a href="#greather_than">value three</a> </li> <li><a href="#less_than">value four</a> </li> <li class="divider"></li> <li><a href="#all">value five</a> </li> </ul>