javascript - Get index of visible element in jquery - Stack Overflow

admin管理员组

文章数量:1401641

I want to get index of selectedclass between visible elements in jquery.

<ul>
    <li>element 01</li>
    <li style="display: none">element 02</li>
    <li style="display: none">element 03</li>
    <li style="display: none">element 04</li>
    <li>element 05</li>
    <li>element 06</li>
    <li class="selected">element 07</li>
    <li style="display: none">element 08</li>
</ul>

I have tried these ways

console.log($('ul li.selected').index());
console.log($('ul li:visible.selected').index());

I want the number 3 for the example above: The index of the .selected element in the ul ignoring the elements that aren't visible.

I want to get index of selectedclass between visible elements in jquery.

<ul>
    <li>element 01</li>
    <li style="display: none">element 02</li>
    <li style="display: none">element 03</li>
    <li style="display: none">element 04</li>
    <li>element 05</li>
    <li>element 06</li>
    <li class="selected">element 07</li>
    <li style="display: none">element 08</li>
</ul>

I have tried these ways

console.log($('ul li.selected').index());
console.log($('ul li:visible.selected').index());

I want the number 3 for the example above: The index of the .selected element in the ul ignoring the elements that aren't visible.

• javascript
• jquery

Share Improve this question Follow edited Jun 2, 2019 at 10:13 T.J. Crowder 1.1m200200 gold badges2k2k silver badges1.9k1.9k bronze badges asked Jun 2, 2019 at 9:56 Mahdi BashirpourMahdi Bashirpour 18.9k1717 gold badges131131 silver badges152152 bronze badges 6

• You can determine if your elem has a certain CSS style with ($('li#myId').css('display') == 'none'), same with class using hasClass – Alicia Sykes Commented Jun 2, 2019 at 9:57
• What are you expecting as both of those lines output 6 which is the index of the li containing 'element 07'? – Calum Commented Jun 2, 2019 at 10:03
• It's not clear what you're asking for. Why "between visible elements"? What number are you expecting? 6? 3? – T.J. Crowder Commented Jun 2, 2019 at 10:06
• 1 I expect the number 3 to return @T.J.Crowder – Mahdi Bashirpour Commented Jun 2, 2019 at 10:08
• 1 Sorry, question wasn't totally clear. But what I meant was, presuming you already know how to use index(), you can then just use hasClass/ css with that, should work fine – Alicia Sykes Commented Jun 2, 2019 at 10:10

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 10

You can use index on the result of selecting the visible elements, passing in the selected element (or a jQuery object containing it). index will find the index of the element within the jQuery set (the visible elements):

var index = $("ul li:visible").index($("ul li.selected"));

Live Example:

console.log($("ul li:visible").index($("ul li.selected")));

<ul>
    <li>element 01</li>
    <li style="display: none">element 02</li>
    <li style="display: none">element 03</li>
    <li style="display: none">element 04</li>
    <li>element 05</li>
    <li>element 06</li>
    <li class="selected">element 07</li>
    <li style="display: none">element 08</li>
</ul>

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

本文标签： javascriptGet index of visible element in jqueryStack Overflow