CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Adrian
Adrian

Reputation: 3052

How add class to a div after class in jQuery?

I have a child div that needs to be added with a class using jQuery.

<div class="main-content">
     <article class="post status-publish">
          <div class="post-content>
               <div class="vc_row wpb_row vc_row-fluid">

                    <div class="vc_col-sm-12 wpb_column vc_column_container ">
                    </div>   

                </div>
          </div>
     </article>
</div>

The jQuery code that i tried so far is this:

j('.main-content .post-content').each(function () {
    j(this).after().addClass('home-inner-content');
});

This is the result that i am desiring for:

<div class="main-content">
     <article class="post status-publish">
          <div class="post-content>
               <div class="vc_row wpb_row vc_row-fluid home-inner-content">

                    <div class="vc_col-sm-12 wpb_column vc_column_container ">
                </div>   

            </div>
          </div>
     </article>
</div>

Any help is appreciated. Thanks

Upvotes: 1

Views: 5451

Answers (4)

RIT Design
RIT Design

Reputation: 56

You don't need to use each function here.

j('.main-content .post-content>div').addClass('home-inner-content');

Upvotes: 1

Patrick Roberts
Patrick Roberts

Reputation: 51766

$('.main-content .post-content').each(function() {
  $(this).children().addClass('home-inner-content');
});
body * {
  padding-left: 1em; 
}

body *:before {
  font-family: monospace;
  content: attr(class);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-content">
  <article class="post status-publish">
    <div class="post-content">
      <div class="vc_row wpb_row vc_row-fluid">
        <div class="vc_col-sm-12 wpb_column vc_column_container">
        </div>
      </div>
    </div>
  </article>
</div>

Upvotes: 2

Ouroborus
Ouroborus

Reputation: 16865

You probably want something like:

j('.main-content .post-content').each(function () {
    j(this).children().first().addClass('home-inner-content');
});

.after() is for inserting content, not locating it.

But really, I don't think you need a loop. You can do:

j('.main-content .post-content > *:first-child').addClass('home-inner-content');

The first part selects the elements you want. .addClass() adds a class to each of the elements that got selected.

Upvotes: 4

Viktor Kukurba
Viktor Kukurba

Reputation: 1370

If I understand you correctly, next code will help.

$('.main-content .post-content>div').addClass('home-inner-content');

Upvotes: 3

Related Questions