javascript - How to get selected item in list-group in bootstrap - Stack Overflow

admin管理员组

文章数量:1329260

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

Share Improve this question Follow asked Sep 10, 2015 at 7:38 progNewbieprogNewbie 4,83299 gold badges5656 silver badges121121 bronze badges 2

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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();

本文标签： javascriptHow to get selected item in listgroup in bootstrapStack Overflow