将内联样式添加到可见的最后一个子项

Question

我正在使用：

$( ".scroll > *:visible:last" ).css( "margin-bottom", "0" );

要定位所有可见子项并将"边距底部：0"(内联(添加到最后一个可见子项，它将产生以下结果：

<div class="scroll">
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<div style="margin-bottom: 0px;">
<p>fsfdsfsdfsd</p>
</div>
<p class="hide">This is text...</p>
<p class="hide">This is text...</p>
<p class="hide">This is text...</p>
</div>

这是预期的，并且在类"scroll"是最后一个可见的子级之前工作正常，如下所示：

<div class="scroll">
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<div class="scroll">
<p>fsfdsfsdfsd</p>
</div>
<p class="hide">This is text...</p>
<p class="hide">This is text...</p>
<p class="hide">This is text...</p>
</div>

内联样式现在添加如下：

<div class="scroll">
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<div class="scroll">
<p style="margin-bottom: 0px;">fsfdsfsdfsd</p>
</div>
<p class="hide">This is text...</p>
<p class="hide">This is text...</p>
<p class="hide">This is text...</p>
</div>

我想我会期待这个：

<div class="scroll">
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<div class="scroll" style="margin-bottom: 0px;">
<p style="margin-bottom: 0px;">fsfdsfsdfsd</p>
</div>
<p class="hide">This is text...</p>
<p class="hide">This is text...</p>
<p class="hide">This is text...</p>
</div>

我错过了什么？

Answer 1

你应该使用last-of-type而不是last

：last-of-type 选择器匹配最后一个元素的每个元素 其父级的特定类型的子项。

$(".scroll > *:visible:last-of-type").css("margin-bottom", "0");

.hide {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll">
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<p>This is text...</p>
<div class="scroll">
<p>fsfdsfsdfsd</p>
</div>
<p class="hide">This is text...</p>
<p class="hide">This is text...</p>
<p class="hide">This is text...</p>
</div>