CODEWITHSUNDEEP
javascriptjqueryhtml
john285
john285

Reputation: 53

Run a function for each element with same class

I have a list of elements with the same class and I'd like to check whether under the same parent, they have content or not. If it doesn't have content, add a class

So, because it's the same class, I'd need to run the function for each element and, once checked, add or not the class and keep checking the others

No matter what I try, I can't make it work

$(document).ready(function() {
  $(".description").each(function() {
    if ($.trim($(this).text()).length == 0) {
      $('.title').addClass('emptyDesc');
    }
  });
});
.emptyDesc{
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <span class="title">TITLE</span>
    <span class="description"></span>
    <!-- Check whether it has description or not. If not, add class -->
  </li>

  <li>
    <span class="title">TITLE</span>
    <span class="description">DESCRIPTION</span>
    <!-- Check whether it has description or not. If not, add class -->
  </li>

  <li>
    <span class="title">TITLE</span>
    <span class="description"></span>
    <!-- Check whether it has description or not. If not, add class -->
  </li>
  <ul>

Upvotes: 0

Views: 349

Answers (3)

ElusiveCoder
ElusiveCoder

Reputation: 1609

Try this...

$(document).ready(function(){
  $('li>span').each(function(){
    if($(this).is(':empty')){
      $(this).prev().addClass('emptyDesc');
    }
  });
});
.emptyDesc {
  background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
        <span class="title">TITLE</span>
        <span class="description"></span>  <!-- Check whether it has description or not. If not, add class -->
    </li>

    <li>
        <span class="title">TITLE</span>
        <span class="description">DESCRIPTION</span>  <!-- Check whether it has description or not. If not, add class -->
    </li>

    <li>
        <span class="title">TITLE</span>
        <span class="description"></span>  <!-- Check whether it has description or not. If not, add class -->
    </li>
<ul>

Upvotes: 0

Saurabh Yadav
Saurabh Yadav

Reputation: 3386

Find sibling and then add class

 <script>
        $( document ).ready(function() {
        $( ".description" ).each(function() {
            if ( $.trim( $(this).text() ).length == 0 ) {
               $(this).siblings('.title').addClass('emptyDesc');
            }
            });
        });
      </script>

Upvotes: 0

Phiter
Phiter

Reputation: 14992

You're adding emptyDesc to every title on the 4th line. You have to get the closest title like this:

$(document).ready(function() {
  $(".description").each(function() {
    if ($.trim($(this).text()).length == 0) {
      $(this).siblings('.title').addClass('emptyDesc');
    }
  });
});
.emptyDesc{
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <span class="title">TITLE</span>
    <span class="description"></span>
    <!-- Check whether it has description or not. If not, add class -->
  </li>

  <li>
    <span class="title">TITLE</span>
    <span class="description">DESCRIPTION</span>
    <!-- Check whether it has description or not. If not, add class -->
  </li>

  <li>
    <span class="title">TITLE</span>
    <span class="description"></span>
    <!-- Check whether it has description or not. If not, add class -->
  </li>
  <ul>

Upvotes: 2

Related Questions