How to add apply CSS using jQuery's closest method?

Question

 $("p.ABC ").closest(".b .y").addClass("t"); 

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

I want to add CSS property only to tag h1 of first div. How to do it?

Answer 1

.closest() will not work with the multi-level selector. Hence, closest(".b .y") will not match any element.

You have to use .find() on the .closest() element:

 console.log($("p.ABC ").closest(".b .y").length); // 0 $("p.ABC ").closest(".b").find(".y").addClass("t"); 

 .t{ color: red; } 

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

Though, I think the easiest way is:

$(".b:eq(0) h1.y").addClass("t");

Answer 2

$（'。b h1：first'）。addClass（“ t”）;

Answer 3

You can also use the following:

 $("p.ABC ").closest(".a").prev('.y').addClass("t"); 

 .t{ background-color: red; } 

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

This line, first gets the parent (closest) of the class ABC and then finds the class y which is placed before that parent by the prev method and then adds a class t to it.

Answer 4

The below will highlight the title in the first matching div only

 $("p.ABC") // your starting selector .closest(".b") // get the closest b div .first() // only get the first of these .find('.y') // find the title .addClass("t"); // add class to the first div's title only 

 .t { color: green; } 

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

Answer 5

closest() is to find the parent of the element.

Check this one.

 $(".b h1:first").css("color","red"); 

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

Answer 6

You can achieve this by two ways:

1. $("p.ABC").closest("div.b").find("h1.y:first").addClass("t"); // you can add your css on t class.
2. $("p.ABC").closest("div.b").find("h1.y:first").css("color","green");

Both will work fine.