Получение идентификатора DIV, который в настоящее время отображается

Question

У меня есть следующий HTML-код:

<div id="skills"> 
    <div class="items" id="items1" style="display:none">1</div> 
    <div class="items" id="items2" >2</div> 
    <div class="items" id="items3" style="display:none">3</div> 
    <div class="items" id="items4" style="display:none">4</div> 
    <div class="items" id="items5" style="display:none">5</div> 
</div> 

Мне нужно получить доступ к div, который в настоящее время отображается и получить его id. Пожалуйста, дайте мне знать, как я могу это сделать?

Answer 1

Вы можете использовать .not(), которые удалить элементы из набора соответствующих элементов.

var divId = $("div.items").not(":hidden").prop("id"); 

Working Demo

Answer 2

Вы можете использовать селектор :visible:

var visibleId = $('.items:visible').prop('id'); // = 'items2' 

Answer 3

JQuery имеет специальный :visible селектор. Вы можете использовать это для соответствия любому элементу, который отображается.

https://api.jquery.com/visible-selector/

Элементы считаются видимыми, если они потребляют пространство в документе. Видимые элементы имеют ширину или высоту, которая больше нуля.

Элементы с visibility: hidden или opacity: 0 считаются видимыми, так как они все еще потребляют пространство в макете.

Так, чтобы использовать это в вашем случае, вы бы что-то вроде этого:

var desired_id = $('.items:visible').prop('id'); 

Имейте в виду, что если более чем один элемент сопоставляется с помощью .items:visible, вы получите только первый совпадающий элемент id и не все из них.