CODEWITHSUNDEEP
jquery
Dummy
Dummy

Reputation: 373

How do I color the background of a child element residing in the clicked element

The following works to color the background of a clicked element in jquery

$(this).css("background-color","green")

I'd like however to color the background of the span residing in the clicked element.

I tried the following, but without succes

$(this + "span").css("background-color","green")

Upvotes: 0

Views: 32

Answers (2)

gavgrif
gavgrif

Reputation: 15509

Rather than trying to apply a style to the element it would be better to apply a class to the parent element on the click and then have a style rule to select the span within it:

$('#linkButton').click(function() {
   $(this).toggleClass('active')
})
.active span {
  background-color: green;
  color:white
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type ="button" id="linkButton"> 
   Click me to toggle the background of my <span>span text</span>.
 </button>

Upvotes: 0

DesignerAshish
DesignerAshish

Reputation: 81

PLease try this one. ".find()" will select the children element inside the clicked element. You can use children() too. but first try with this one.

$(this).find('span').css("background-color","green");

Upvotes: 1

Related Questions