Question

这是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 也应该是红色的。

以上代码的输出。

enter image description here

Answer 1

移动你的.andSelf()：

$('.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')

Answer 2

好的，让我解释一下......

您的代码

$('.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>

为什么链接.andSelf（）不起作用？

2 个答案: