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

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带有直接子选择器（ > ）的 :last-child伪类选择器 。

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

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

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

---

要选择第二个子项，请使用:nth-child(2)以及直接子选择器（ > ）以避免嵌套元素。

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

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

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

Answer 3

让我先修改你的标记：

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

据我所知，你只想选择文本“选择这个”。 我不确定你要做什么，但如果你只是想得到文本。 您可以使用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();