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

Question

我正在使用:

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

以所有可见子项为目标，并将“margin-bottom: 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

The :last-of-type selector matches every element that is the last child, of a particular type, of its parent.

$(".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>