How to get the selected index of <li> inside <ul> using Javascript?

Question

How to get the selected index of <li> inside <ul> using Javascript?

2.2k views Asked by showtime At 19 January 2021 at 11:39

I used to do this for <option> selected:

var select_filter = document.getElementById("myDropdown");
if (select_filter && select_filter[select_filter.selectedIndex].value == 0) {
 ///...
}

but now I am using <li> elements inside <ul> , so how can I achieve the same like above?

EDIT Added html:

<ul class="nav nav-tabs" id="nav-tabs">
    <li class="nav-item" id="Driftcenter-nav-tav">
        <a class="nav-link active" data-toggle="tab" href="#Driftcenter"
            onclick="load_business_units(); showFilter();">Driftcenter</a>
    </li>
    <li class="nav-item" id="vognmaend-nav-tav">
        <a class="nav-link" data-toggle="tab" href="#vognmaend"
            onclick="load_operation_carrier_list(); showFilter();">Vognmænd</a>
    </li>
    <li class="nav-item" id="ads-segment-nav-tav">
        <a class="nav-link" data-toggle="tab" href="#ads-segment"
            onclick="load_ads_units(); showFilter();">ADS Segment</a>
    </li>
    <li class="nav-item" id="traffik-info-nav-tab">
        <a class="nav-link" data-toggle="tab" href="#trafik-info"
            onclick="filterTrafficCondition(); hideFilter();">Trafikinfo</a>
    </li>
    <li class="nav-item" id="vejr-varsel-nav-tab">
        <a class="nav-link" data-toggle="tab" href="#vejr-varsel"
            onclick="filterTrafficWeather(); hideFilter();">Vejrvarsel</a>
    </li>
</ul>

Original Q&A

There are 1 answers

**sourav satyam** · Answer 1 · 2021-01-19T11:52:51+00:00

You can do something like below example to get the index of clicked list item

const ulList = document.getElementById("ul-ele");
const li = document.getElementsByTagName('li');
var nodes = Array.from( ulList.children );
let selected = -1;
document.getElementById("ul-ele").addEventListener("click",function(e) {
        if (selected !== nodes.indexOf(e.target)) {
            selected = nodes.indexOf(e.target);
            console.log(selected);
        } else {
            console.log("Already selected");
        }
        
});

<html>
 <body>
  <ul id="ul-ele">
   <li>Index 1</li>
   <li>Index 2</li>
   <li>Index 3</li>
   <li>Index 4</li>
  </ul>
 </body>
</html>

TechQA.

How to get the selected index of <li> inside <ul> using Javascript?

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML-LISTS

Related Questions in SELECTEDINDEX

Popular Questions

Popular Tags

Trending Questions