CODEWITHSUNDEEP
javascriptjqueryhtmlparent-child
Nesta
Nesta

Reputation: 1008

How to add a class to parent if child has a specific class

I have this html structure:

<section>
      <div class="v-middle">
        <div class="row">
          <h5 class="heading">Heading goes here</h5>
         </div>
      </div>
    </section>

And I need to add the class "newClass" to the parent Section tag when the h5 has .heading class.

I tried the following but it didn't work and I don't know why:

 $('.heading').parent('section').addClass('newClass');

DEMO

https://fiddle.jshell.net/4smhxoL6/1/

Upvotes: 0

Views: 3015

Answers (6)

Umashankar
Umashankar

Reputation: 709

You can use below code for specific h5 with .heading class. Because if this heading class available in other element this will protect you.

$('h5.heading').closest('section').addClass('newClass')

Upvotes: 1

TripleDeal
TripleDeal

Reputation: 736

All of the posted answers are forgetting 1 thing:

And I need to add the class "newClass" to the parent Section tag when the h5 has .heading class.

newClass should only be applied when the <h5> element has heading class.

This code should do the trick.

var heading = $('.heading');

if (heading.length && heading.is('h5')) {
    heading.closest('section').addClass('newClass');
}

https://jsfiddle.net/4yo72hhd/

Upvotes: 1

YinchaoOnline
YinchaoOnline

Reputation: 188

Instead of parent method,try parentsUntil method.For details,see jQuery Traversing - Ancestors

$('.heading').parentsUntil('section').addClass('newClass');

Demo:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    section {
      width: 100%;
      height: 200px;
    }
    
    .newClass {
      background: red;
    }
  </style>
</head>

<body>

  <section>
    <div class="v-middle">
      <div class="row">
        <h5 class="heading">Heading goes here</h5>
      </div>
    </div>
  </section>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    $('.heading').parentsUntil('section').addClass('newClass');
  </script>
</body>

</html>

Hope it could help you.

Upvotes: 1

Gokulan P H
Gokulan P H

Reputation: 1898

Change parent to parents. 

$('.heading').parents('section').addClass('newClass');

or

You can use 

$('.heading').closest('section').addClass('newClass');

working fiddle: https://fiddle.jshell.net/1y3ejtjz/

Upvotes: 1

prasanth
prasanth

Reputation: 22500

you could use closest() instead of parent() .parent matching immediate parent. closest matching the parent first section detect

 $('.heading').closest('section').addClass('newClass');
section {
  width:100%;
  height: 200px;
}

.newClass {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
      <div class="v-middle">
        <div class="row">
          <h5 class="heading">Heading goes here</h5>
         </div>
      </div>
    </section>

Upvotes: 1

tymeJV
tymeJV

Reputation: 104775

.parent looks at the immediate parent, which isn't a section, but a div. You want closest:

$('.heading').closest('section').addClass('newClass');

https://fiddle.jshell.net/4smhxoL6/2/

Upvotes: 1

Related Questions