jQuery选择第一个元素实例的第二个孩子

Question

如何使用jQuery选择Bar，这是p中第一个div.page元素的第二个孩子？

谢谢！

<div class="page">
    <h4>Hello</h4>
    <p>
        <b>Foo</b>
        Bar
    </p>
    <p>
        <b>Hello</b>
        World
    </p>
</div>

Answer 1

使用:first选择器查找第一个p元素，并使用nextSibling属性获取b元素的兄弟。

var bar = $(".page > p:first > b")[0].nextSibling.nodeValue.trim();
console.log(bar);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
    <h4>Hello</h4>
    <p>
        <b>Foo</b>
        Bar
    </p>
    <p>
        <b>Hello</b>
        World
    </p>
</div>

您也可以复制元素并删除复制元素p的子元素，然后获取它的文本。

var bar = $('.page > p:first').clone().children().remove().end().text().trim();

Answer 2

正如穆罕默德评论的那样，巴尔不是一个元素，它是第一个孩子的价值。要选择.page下的第一个子p元素，您可以使用$('.page p:first-child')获取第一个孩子，或$('.page p:nth-of-type(1)')，您可以使用您想要的孩子的索引替换1。如果你想获得'Bar'，请使用val（），例如$('.page p:first-child').val()

参考：https://api.jquery.com/first-of-type-selector/

Answer 3

Hello Friend use this code it will give you foo.......

jQuery(document).ready(function(){
  var foo = jQuery(".page").find('p b:eq(0)').text();
  alert(foo);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
    <h4>Hello</h4>
    <p>
        <b>Foo</b>
        Bar
    </p>
    <p>
        <b>Hello</b>
        World
    </p>
</div>

Answer 4

您可以将索引（在您的情况下为1）作为参数传递给jQuery的第n个子函数。

$(".page:nth-child(1)");

或者你也可以使用第一个孩子

$(".page:first-child");