javascript - 如何根据样式获取特定元素javascript

Question

我需要访问具有特定样式的元素。

这是我的结构

<ul>
  <li> Hi </li>
  <li> bye </li>
  <li> third one </li>
</ul>

列表项彼此重叠(最后一个在前)，我可以不喜欢某事或喜欢某事。一旦我这样做，它就会得到一个样式 display:none 如下所示:

<ul>
  <li> Hi </li>
  <li> bye </li>
  <li style:"display:none;"> third one </li>
</ul>

在我这样做之后，我希望能够访问最后一个没有显示的元素:无，(再见)我该怎么做？

我在考虑以下形式的东西:

var myId = $("#slider > ul li").last().attr("id");

但显然我总是能得到隐藏的元素的 ID，因为它仍然存在。

我可以做一些类似 select last where !display:hidden 的事情吗？

Answer 1

Can I do something like select last where !display:hidden ?

是的，使用 jQuery 的 :visible伪类:

var myId = $("#slider > ul li:visible").last().attr("id");

(注意:您的 li 元素实际上没有 id 值，但这是一个调整。)

实例:

var listItem = $("#slider > ul li:visible").last();
$("<p>")
  .text("Text of last visible item: " + listItem.text())
  .appendTo(document.body);

<div id="slider">
  <ul>
    <li>Hi</li>
    <li>bye</li>
    <li style="display:none;">third one</li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>