javascript - 子要素に関する jQuery の問題

Question

divコードの最後の部分が最初のビットのように最初の部分ではなく2 番目の部分に影響する理由がわかりません。さらに、そこにあった他のすべてのコンテンツが消えますが、これは望ましい動作ではありません。私が読んでいる本では、最初の div ではなく 2 番目の div が影響を受ける理由が説明されていません。これが最初ではなく 2 番目に発生するのはなぜですか? 直接の親と見なされる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 を指定すると、最後のオプション (この場合は 2 番目) がヒットします。疑似セレクターを追加しなかった場合、それらは両方ともヒットします。

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 が最初の子で、2 番目の div が最後の子であり、期待される結果が得られます。

あなたが達成しようとしていることは、次のように行う必要があります。

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