Question

我需要访问具有某种风格的元素。

这是我的结构

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

列表项目放在彼此之上（最后一个），我可能不喜欢某事或喜欢某事。一旦我这样做，它会得到一个样式显示：没有像下面这样：

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

现在，在我这样做后，我希望能够访问最后一个没有显示的元素：无，（再见）我该怎么做？

我正在考虑以下形式的事情：

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

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

我可以选择最后一个地方！display：hidden？

Answer 1

我可以选择最后一个地方！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>

Answer 2

可以使用':visible'选择器

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

Answer 3

应该使用：

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

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

Answer 4

所以你的内联样式有点偏差应该是

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

你可以做一些不同的事情，最好的可能是迭代并检查display = none，然后转到上一个元素：

$('ul').children().each(function(e) {
   if($(this)[0].style.display == 'none') {
     console.log($(this).prev());   
   }
})

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

4 个答案: