0

ここに、問題を調べる jsfiddle があります。http://jsfiddle.net/4CuqR/

ここに同じフィドルコードをコピーして貼り付けます。

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    p,div { margin: 0; padding: 0; padding-left: 20px; }
  </style>  
</head>
<html>
<body>
  <DIV class="main">
    <span>Main Class</span>
    <DIV class="sub1">
      <span>sub1 Class</span>
      <p>Hello P1</p>
      <p>Hello P2</p>
    </DIV>
  </DIV>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script>
  $(function() {
      $('.main').children('.sub1').children('p:first').andSelf().andSelf().css("color", "red");
  });​
  </script>
</html>

上記のコードでは、理想的にはDIV.mainも赤にする必要があります。

上記のコードの出力は次のとおりです。

ここに画像の説明を入力

4

2 に答える 2

3

を動かします.andSelf():

$('.main').children('.sub1').andSelf().children('p:first').andSelf().css("color","red");​

デモ: http://jsfiddle.net/4CuqR/2/ .

これはかなり複雑なセレクターです。

  • 最初の.andSelf()選択:

      $('.main').children('.sub1')
+ $('.main')

  • 2 つ目は次の.andSelf()ように追加します。

      $('.main').children('.sub1').andSelf().children('p:first')
+ $('.main').children('.sub1')
+ $('.main')
于 2013-01-01T15:34:56.777 に答える
1

わかりました、少し説明させてください...

以下のコード

$('.main').children('.sub1').children('p:first')

あなたに要素を与えます

<p>Hello P1</p>

さて、最初のを追加すると.andSelf()、それはあなたに要素を与えます

<DIV class="sub1">
  <span>sub1 Class</span>
  <p>Hello P1</p>
  <p>Hello P2</p>
</DIV>

次に、2番目を追加し.andSelf()ても、同じ要素が得られます

<DIV class="sub1">
  <span>sub1 Class</span>
  <p>Hello P1</p>
  <p>Hello P2</p>
</DIV>

そのため、コードは機能せず、DIV.mainは赤ではありません。

だから、これを試してみてください：

$('.main').children('.sub1').andSelf().children('p:first').andSelf().css("color","red");

これにより、DIV.mainも選択され、cssが追加されます。

ここに以下のコードがあります

$('.main').children('.sub1').andSelf()

以下の要素を提供します

<DIV class="main">
   <span>Main Class</span>
   <DIV class="sub1">
      <span>sub1 Class</span>
      <p>Hello P1</p>
      <p>Hello P2</p>
   </DIV>
</DIV>​

次に、2番目を追加し.andSelf()ても、同じ要素が得られます

<DIV class="main">
   <span>Main Class</span>
   <DIV class="sub1">
      <span>sub1 Class</span>
      <p>Hello P1</p>
      <p>Hello P2</p>
   </DIV>
</DIV>​
于 2013-01-01T15:54:19.450 に答える