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

您可以使用:visible选择器：

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

Answer 2

jQuery有一个专用的:visible选择器。您可以使用它来匹配正在显示的任何元素。

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

如果元素占用文档中的空间，则认为元素是可见的。可见元素的宽度或高度大于零。

visibility: hidden或opacity: 0的元素被认为是可见的，因为它们仍占用了布局中的空间。

所以要在你的场景中使用它，你会有这样的东西：

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

请注意如果使用.items:visible匹配多个元素，则只会获得第一个匹配的元素id而不是所有元素

Answer 3

您可以使用.not()删除匹配元素集中的元素。

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

Working Demo

获取正在显示的div的id

3 个答案: