I have a list-group like this:

<div class="list-group list">
    <a href="#" class="list-group-item active" id="leftOverlayTitle">
        Cras justo odio
    </a>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
</div>

I wonder how I can check with plain Javascript, which element is highlighted (selected).

Any suggestions?

I have a list-group like this:

<div class="list-group list">
    <a href="#" class="list-group-item active" id="leftOverlayTitle">
        Cras justo odio
    </a>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
</div>

I wonder how I can check with plain Javascript, which element is highlighted (selected).

Any suggestions?

• javascript
• twitter-bootstrap
• list

• Do you want to get the element which has an active class? – m4n0 Commented Sep 10, 2015 at 7:53
• 1 Try this - $("div#list-group a.active").html() – Vishnu Atrai Commented Sep 10, 2015 at 8:27

3 Answers 3

You can use

var x = document.getElementsByClassName("list-group-item");
    for (i = 0; i < x.length; i++) {
        x[i].onclick=function(){        
            console.log(this);
        }
    }

If you want to get highlighted (active) items only:

var items = document.getElementsByClassName("list-group-item active");

To get all items and then do the checking with each separately:

var items = document.getElementsByClassName("list-group-item");
for (var i = 0; i < items.length; i++) {
   if ((' ' + items[i].className + ' ').indexOf(' active ') > -1) 
       items[i].setAttribute('style', 'color: #F00');
   else 
       items[i].setAttribute('style', 'color: #CCC');
}

Either way, the key to solution is getElementsByClassName method. You can read more about it: https://developer.mozilla/en-US/docs/Web/API/Document/getElementsByClassName

let seleccionado= $(".list-group a.active").html()

let seleccionado = $("#ListaEnlaces a.active").html();