javascript - 子元素的jQuery问题

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”&gt;
  <strong class=”changemytext”&gt;some name</strong>
  <p class=”changemytext”&gt;Some text<p>
  <strong>another name</strong>
  <p>More text<p>
</div>

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

Answer 1

first-child 导致您点击第一个可用选项，last-child 导致您点击最后一个选项（在这种情况下为第二个。如果您没有添加伪选择器，它们都会同时点击它们。

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!');
});