Question

我不明白为什么代码的最后部分影响第二个div而不是第一个代码影响第一部分。此外，那里的所有其他内容都消失了，这不是理想的行为。我正在阅读的这本书没有解释为什么第二个div受影响而不是第一个。为什么这发生在第二个而不是第一个？我假设div:last-child会改变第一个div，因为它被认为是直接的父母？

的jQuery

$(document).ready(function(){
  $('div:first-child').text('This is the first child');   
  $('div:last-child').text('I\'ve changed this!'); 
});

HTML

<div id=”myfirstdiv”>
  <strong class=”changemytext”>some name</strong>
  <p class=”changemytext”>Some text<p>
  <strong>another name</strong>
  <p>More text<p>
</div>

<div id=”myseconddiv”>
  <strong class=”changemytext”>some name</strong>
  <p class=”changemytext”>Some text<p>
  <strong>another name</strong>
  <p>More text<p>
</div>
</body>

Answer 1

第一个孩子会让你点击第一个可用选项，最后一个孩子会让你击中最后一个选项（在这种情况下是第二个。如果你没有添加伪选择器，它们都会同时击中它们。

Answer 2

我只会翻译您的选择器：

//$(The divs that the first child of their parents).text('This is the first child');
$('div:first-child').text('This is the first child');   

//$(The divs that the last child of their parents).text('I\'ve changed this!');
$('div:last-child').text('I\'ve changed this!');

Answer 3

:first-child Selector基本上选择了父母第一个孩子的所有元素。

并且:last-child Selector选择所有父元素的最后一个子元素。

此处，父级是body，第一个div是第一个孩子，第二个div是最后一个孩子，你在这里得到预期的结果。

你想要实现的目标需要像这样：

$(document).ready(function () {
    $('div :first-child').text('This is the first child');
    $('div :last-child').text('I\'ve changed this!');
});

jQuery与子元素的问题

3 个答案: