我试图找到第一个“可见的”li ，在下面的代码中这将是 li2-2 .
但出于某种原因.children('li:visible')或 .attr()给我第一个<li>来自 <ul> .
我该如何解决这个问题？
alert($("#myul").children('li:visible').attr("id"));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="descendants">body (great-grandparent)
<div style="width:500px;">div (grandparent)
<ul id="myul">ul (direct parent)
<li style="visibility:hidden;" id="li1-1">li (child)
<span>span (grandchild)</span>
</li>
<li style="visibility:visible;" id="li2-2">li (child)
<span>span (grandchild)</span>
</li>
<li style="visibility:hidden;" id="li3-3">li (child)
<span>span (grandchild)</span>
</li>
<li style="visibility:visible;" id="li4-4">li (child)
<span>span (grandchild)</span>
</li>
</ul>
</div>
</body>最佳答案
As mentioned in jquery doc elements with visibility: hidden or opacity: 0 are considered visible.
这会导致您的代码选择所有 li。
你可以使用.filter()来过滤元素有visibility:visible
var id = $("#myul").children('li').filter(function(){
return $(this).css("visibility") == "visible"
}).first().attr("id");
console.log(id);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:500px;">div (grandparent)
<ul id="myul">ul (direct parent)
<li style="visibility:hidden;" id="li1-1">li (child)
<span>span (grandchild)</span>
</li>
<li style="visibility:visible;" id="li2-2">li (child)
<span>span (grandchild)</span>
</li>
<li style="visibility:hidden;" id="li3-3">li (child)
<span>span (grandchild)</span>
</li>
<li style="visibility:visible;" id="li4-4">li (child)
<span>span (grandchild)</span>
</li>
</ul>
</div>关于javascript - 查询 :visible selector does not give proper output，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52604758/