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()的 s：

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

演示：http: //jsfiddle.net/4CuqR/2/。

这是一个相当复杂的选择器。

  • 第一个.andSelf()选择：

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

  • 然后第二个.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>

接下来，当您添加第二个时.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>​

接下来，当您添加第二个时.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 回答