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

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"，我想在其中使用类“b”向div添加css属性。怎么做？

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 class="ABC">并检查它是否有使用hasClass()的类。然后你可以向上遍历以找到与class="b"最近的元素

像这样的东西：

var elementToModify = $('p').hasClass('ABC').closest('.b');
elementToModify.prop('property', newValue);

查看这些以进一步了解它们的用途：

prop()

closest()

Answer 4

你可以使用$("p.ABC")找到所有<p>类ABC然后.closest(".b")找到父类div与类b然后.css()来改变css属性。

我建议使用.addClass() / .removeClass()而不是直接更改css，但这有助于您找到父母。

这也允许你在你的HTML中有多个div class='b'，它只适用于ABC的那个

$("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，这更接近你的概念：如果<p>包含class="ABC"，则将css添加到带有“b”类的div

所以这取决于你想要用它的方式。

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

<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>