将内联样式添加到可见的最后 Child

Question

我正在使用：

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

以所有可见的 children 为目标，并将 "margin-bottom: 0"（内联）添加到最后一个可见的 child，它会产生以下结果：

<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>

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

<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>

将内联样式添加到可见的最后 Child

Add Inline Style to Visible Last Child

jquery

jquery-selectors