使用jQuery为.scroll最后一个可见子元素加行内样式的异常问题

你的问题核心在于jQuery的:last选择器行为——它会从所有匹配到的元素集合里挑选最后一个，而不是为每个.scroll父元素单独选择它自己的最后一个可见直接子元素。

举个直观的例子，假设你的DOM结构是这样：

<div class="scroll">
  <div class="scroll" style="display: block;"> <!-- 这是外层scroll的目标子元素 -->
    <p style="display: block;">内层scroll的目标子元素</p>
  </div>
</div>

当你执行$( ".scroll > *:visible:last" )时，jQuery会先找出所有符合.scroll > *:visible的元素：

• 外层.scroll的直接子元素：带.scroll类的div
• 内层.scroll的直接子元素：p标签

然后:last会从这个全局集合里挑出最后一个元素（也就是p标签），所以样式只会加到p上，外层的目标div完全被忽略了。

你需要逐个遍历每个.scroll元素，在每个元素的上下文里定位它自己的最后一个可见直接子元素。用.each()结合.children()和.last()就能完美实现需求：

$(".scroll").each(function() {
  // 针对当前的.scroll元素，找到它的所有可见直接子元素，再取最后一个
  $(this).children(":visible").last().css("margin-bottom", "0");
});

为什么这个方案有效？ #

• .each()会逐个处理每个.scroll元素，确保操作是针对单个父元素的，不会互相干扰
• .children(":visible")只会获取当前元素的直接子元素里可见的那些，不会深入到内层嵌套元素
• .last()是在当前父元素的子元素集合里取最后一个，而非全局集合的最后一个

这样一来，外层.scroll的带.scroll类的子div会被正确加上margin-bottom:0，同时内层.scroll的p标签也会正常添加样式，完全符合你的预期。

内容的提问来源于stack exchange，提问作者David