Question

这里有2个输入形式，为什么所有文字都是粉红色，但输入[name2]是黑色的？为什么输入[name2]不在children（）集合中？

<form>
<div>Form is surrounded by the green border.

    <label for="name">Child of form:</label>
    <input name="name" id="name" value="123" />

    <div>
       <label for="name2">Child of form in div:</label>
       <input name="name2" id="name2" value="1234" />
    </div>

</form>

<script>
$( "form").children().css( "color", "pink" );
$( "form").children("div").css( "color", "red" );
</script>

Answer 1

div中的输入不是表单的子项。 .children()只有直接的孩子。此外，输入不会从其父级继承样式。如果你想要它们都是粉红色的，那就做：

$('form input').css('color', 'pink');

Answer 2

.children（）只会得到直接的孩子。

获取匹配元素集中每个元素的子元素，可选择通过选择器进行过滤。

$( "form").children("div").css( "color", "red" );

<form>
    <div>Form is surrounded by the green border.//children
        <label for="name">Child of form:</label>//grand children
        <input name="name" id="name" value="123" />//grand children
        <div>//grand children
            <label for="name2">Child of form in div:</label>//grand grand children
            <input name="name2" id="name2" value="1234" />// grand grand children
        </div>
</form>

<小时/> 使用.find()

$('form').find('input').css('color', 'pink');

Answer 3

jQuery children（）方法返回元素的直接子元素，而不是子元素的子元素。因此，在上面的代码中，第二个div中的元素将不会被选中。

要定位，请尝试

$( "form").children("div").children().css( "color", "red" );

jquery儿童bug？为什么不是儿童收藏中的所有物品

3 个答案: