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

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

• javascript
• jquery
• html
• css

4 Answers 4

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.

If I understand you correctly, next code will help.

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

$('.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./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>

You don't need to use each function here.

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