Question

<div class="b" >
   <h1>Hello</h1>
   <div class="a"> 
     <p class="ABC">A........Z</p> //this could be present in some pages
   </div>
</div>

这是一段代码，如果<p>包含class="ABC"，我想在其中添加css属性到类为“ b”的div中。怎么做？

Answer 1

$("p.ABC").parents("div.b").css('background-color', 'red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b" >
   <h1>Hello</h1>
   <div class="a"> 
     <p class="ABC">A........Z</p> //this could be present in some pages
   </div>
</div>

$("p.ABC")会发现所有 p 元素具有类 ABC 。
parents("div.b")找到第一个父级，该父级是 div ，并且具有所选元素的名为 b 的类。
css()添加你想要的风格。还可以使用addClass()方法来添加预定义类。

Answer 2

请检查是否有帮助

if($( "p" ).hasClass( "ABC" )) {
// if you want to add a class with many properties, then
$( "div.b" ).addClass( "yourClass" );
// if you want to add one property to existing class then the below statement
$( "div.b" ).css( "attribute-name", value );
}

可以在 “yourClass”

添加所有的CSS属性

if($("p").hasClass("ABC")) {
$("div.b").css("color", "blue");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b" >
   <h1>Hello</h1>
   <div class="a"> 
     <p class="ABC">A........Z</p> //this could be present in some pages
   </div>
</div>

请检查代码段。

如果'p'具有'ABC'，我向类'b'添加了css属性颜色作为蓝色。它的工作

Answer 3

您可以使用$("p.ABC")查找类为<p>的所有ABC，然后使用.closest(".b")查找类为b然后是.css()的父div更改CSS属性。

我建议您使用.addClass() / .removeClass()而不是直接更改CSS，但这可以帮助您找到父项。

这还允许您在HTML中包含多个div class='b'，并且仅适用于带有ABC的HTML。

$("p.ABC").closest(".b").css("background-color", "pink");

.b+.b {
  border-top: 1px solid black;
  margin-top: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b">
  <h1>Hello</h1>
  <div class="a">
    <p class="ABC">A........Z</p> //this could be present in some pages
  </div>
</div>
<div class="b">
  <h1>Hello</h1>
  <div class="a">
    <p class="DEF">ABC not present</p>
  </div>
</div>

您也可以使用:has

扭转它

$(".b:has(.ABC)").css("background-color", "pink")

其中指出：选择至少有一个孩子的所有.b类别为.ABC的孩子，这更接近于您的概念：如果{{1} }包含<p>

因此，这取决于您要使用哪种方式。

class="ABC"

$(".b:has(.ABC)").css("background-color", "pink")

Answer 4

的一种方法是直接在看<p class="ABC">，并检查其是否具有使用一个类hasClass()。然后，您可以向上移动以找到class="b"

如果找到类，如何为特定的Div添加CSS属性（jQuery）

4 个答案: