Question

<div id="target">
    <div>here</div>
    <div>select this<div>it has more div within</div></div>
<div></div>

如何获得目标的最后一个孩子？我试过了

$('#target').find('div:nth-child(2)')

这是否正确？看起来它也会在我的目标中选择div，这是我不想要的，嗯。

Answer 1

$('#target').children().last();

Answer 2

将:last-child伪类选择器与direct child selector(>)一起使用。

$('#target > div:last-child')

＆＃13;

console.log($('#target>div:last-child').html())

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
  <div>here</div>
  <div>select this
    <div>it has more div within</div>
  </div>
</div>

＆＃13;

要选择第二个孩子使用:nth-child(2)以及direct child selector(>)以避免嵌套元素。

$('#target > div:nth-child(2)')

＆＃13;

console.log($('#target > div:nth-child(2)').html())

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
  <div>here</div>
  <div>select this
    <div>it has more div within</div>
  </div>
</div>

＆＃13;

Answer 3

让我先修复你的标记：

<div id="target">
    <div>here</div>
    <div>select this
        <div>it has more div within</div>
    </div>
</div>

据我所知，你只想选择文字＆＃34;选择这个＆＃34;。我不确定你要做什么，但如果你只是想得到文本。您可以使用text()操纵获取它的字符串，然后删除<div>...</div>部分。但是，如果您尝试将一些像css属性这样的颜色放到此节点上。由于级联功能，您需要修复div。

相反，你可能想要这样做：

<div id="target">
    <div>here</div>
    <div>
        <div>select this</div>
        <div>it has more div within</div>
    </div>
</div>

然后

$("#target").children().last().children().first();

jquery选择器查找没有id或类的div

3 个答案: