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");

Demo

对于.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"); });

Demo

Answer 2

使用jQuery('.menu-items-wrapper').children('div:visible:last').css(borderRight: '0px');

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

2 个答案: