Question

好吧我对.parent选择器有疑问，基本上我试图选择仅在.selected div类中的p元素。我有两种方法可以做到这一点：

  $( "p" ).parent( ".selected" ).css( "color", "yellow" );

  $( ".selected" ).css( "color", "yellow" );

评论一个并尝试另一个做同样的事情，所以我的问题是，这两种选择方式有什么区别？以及如何选择一个元素，在这种情况下，＆＃39; p＆＃39;标记，只在div中选择了＆＃39; <＃39;

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>parent demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <body>

  <div><h1>Hello</h1></div>
  <p>kajdsfdfhkjdsahfdfhjk</p>


  <div class="selected">

    <h1>Hello Again</h1>
  <p>ldjflksjflkdsajf</p>

  </div>

  <script>
  // $( "h1" ).parent( ".selected" ).css( "color", "yellow" );
  $( "p" ).parent( ".selected" ).css( "color", "yellow" );
  $( ".selected" ).css( "color", "yellow" );
  // $( "p" ).css( "color", "yellow" );
  </script>

  </body>
  </html>

Answer 1

有不同的方法可以使用jquery选择器。但应该选择效率最高的那个。

在这种情况下：

$（“p”）。parent（“。select”）。css（“color”，“yellow”）;

第一个jquery使用P元素搜索整个DOM，而不是查找具有“已选择”类的父级而不是应用该样式。这不是那么有效。

$（“。select”）。css（“color”，“yellow”）;

它会查找“选中”类的哪个位置应用样式。它比前一个有效，但它适用于所有选择了类的元素（如果你有很少的其他元素具有相同的类）。所以在这种情况下不会确切的输出。

$（'。selected'）。find（'p'）。css（“color”，“yellow”）;

上面查找所有选择了类的元素，而不是查找“p”并应用样式。

在你的情况下，它可以用css处理，也不需要使用jquery。即

。选择p {} //以防所有p元素都需要设置样式

.selected＆gt; p {} //只有第一个p元素需要设置样式

Answer 2

你只需要用jQuery做到这一点：

$( ".selected p" ).css( "color", "yellow" );

或者如果可以简单地使用CSS

.selected p{
    color:yellow;
}

父选择器的'point'是获取元素的父级的。在这种情况下，我认为你根本不需要它。现在，如果所选类位于您想要更改的元素内的div上，那么.parent()将是合适的。

Answer 3

.parent()用于访问所选div的父级。在很多情况下，当我们根据按钮点击说你要删除整个父div时，你会发现它很有用。现在这只是一个例子，在很多情况下你会引用所选jQuery元素的父元素。

在您的情况下，有一些方法可以实现这一目标 -

a）如果您想在p内选择任何子.selected代码（并不重要），请使用find()

$(".selected").find("p")

如果存在，这将为您提供p的引用。然后你可以去父母。

b）选择直接子元素的一种非常简单的方法是使用css选择器>

$(".selected > p")

这使您可以直接参考父母。

JQuery父选择器，重点是什么？

3 个答案: