Jquery:选择最后一个可见的直接子项

Question

<div class="menu-items-wrapper" style="width: 547px;">
   <div class="one" style="height: 134px;">
   <div class="two" style="display:none;height: 134px;">
   <div class="other" style="height: 134px;">
   <div class="new" style="display: none; height: 134px;"></div>
</div>

我希望从上面的html中获得最后一个可见的直接孩子.请注意,每个儿童div都有更多的HTML,所以这就是为什么我想要直接的孩子.

我现在拥有什么

  jQuery(".menu-items-wrapper > div").find(":visible:last-child").css("border-right","0px");

要么

  jQuery(".menu-items-wrapper > div").find(":visible:last").css("border-right","0px");

但我不能让最后一个直接的孩子没有边界.谁能帮忙

忘了提到我在页面中有12次这样的div并希望将它应用于所有出现的情况.目前它只处理最后一项

Answer 1

.find() 在给定的元素集中查找子元素,这里不会产生任何元素,因为它执行的集合是DOM中元素的最低级别.

您需要:visible:last立即应用于div选择器:

$(".menu-items-wrapper > div:visible:last").css("border-right","0px");?

演示

因为.find()您必须在父节点上运行它:

$(".menu-items-wrapper").find("div:visible:last")

要不就

$(".menu-items-wrapper").find(":visible:last")

编辑

在评论中说明您的添加内容.在有多个menu-items-wrapper元素的情况下,:last不能以这种方式使用,因为它总是选择集合中的最后一个元素.另一方面:last-child,如果你总是想要每个容器中的最后一个元素,那么它会起作用,但当然不是这种情况,因为最后一个孩子可能不是最后一个可见的孩子.

对于那种情况,您必须遍历容器:

$(".menu-items-wrapper").each(function() {
    $('div:visible:last', this).css("border-right","0px");
});

演示