如果找到类，如何为特定的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>

This is a piece of code in which I want to add css properties to div with class "b" if <p> contains class="ABC" . How to do it?

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") this finds all the p elements has the class ABC .
• parents("div.b") finds the first parent that is div and has class named b of the selected element.
• css() adds the styles you want. You can also use addClass() method to add predefined class.

Answer 2

Please check if this helps

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 );
}

You can add all the css properties in "yourClass"

 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> 

Please check the code snippet.

I added a css property color as blue to the class 'b' if 'p' has 'ABC'. its working

Answer 3

You can use $("p.ABC") to find all <p> with class ABC then .closest(".b") to find the parent div with class b then .css() to change css properties.

I recommend using .addClass() / .removeClass() rather than change css directly, but this helps you find the parent.

This also allows you to have multiple div class='b' in your html and it will only apply to the one with 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> 

---

You can also turn it around using :has

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

which states: select all .b that has at least one child that has class .ABC , which is nearer to your concept of: add css to div with class "b" if <p> contains class="ABC"

So it depends on which way you want to work it.

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

Answer 4

One method is to look directly at <p class="ABC"> and check if it has a class using hasClass() . Then you can traverse upwards to find the nearest element with class="b"

Something like this:

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

Checkout these to further understand their use:

prop()

closest()