javascript - 如何在 div 父母中获得最后一个孩子？

Question

我想让最后一个孩子进入父 div。

实际上，我正在使用这个：

var els = '#first,#second,#third';

$(els).each(function () {

  $(this).children().last().addClass('memo');

});

它适用于只有 1 个孩子的 div，但是当最后一个 div 在另一个 div 内的 div 内时，它不起作用。

var els = '#first,#second,#third';

$(els).each(function() {
  $(this).children().last().addClass('memo');
});

.memo {
  background-color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">First text
  <div>a</div>
</div>

<div id="second">Second text
  <img>b
</div>

<div id="third">Third text
  <div>Nested 1
    <div>Nested 2
      <img>c
    </div>
  </div>
</div>

如何引用最新的孩子？

标签： javascriptjquery

Answer 1

孩子不同于孙子/后代。 $.children只看直系子女。

对于您想要的行为，您可以找到在这种情况下使用*和使用的所有后代last()，如果您正在寻找每个 , , 中的最后#first一个#second后代#third

同样重要的是要提到这将获取最后一个元素子节点，而不是最后一个文本节点。jQuery无法直接处理文本节点。感谢@TJ克劳德。请参阅如何使用 jQuery 选择文本节点？

$('#first,#second,#third').each(function () {
  $(this).find('*').last().addClass('memo');
});

img.memo {
  border: 3px solid red;
  padding: 5 px;
}

div.memo {
  border: 3px solid blue;
  padding: 5 px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">
  <div>a</div>
</div>

<div id="second">
  <img>b
</div>

<div id="third">
  <div>
    <div>
    <img>c
    </div>
  </div>
</div>