jQuery select div with empty spans

Question

I have div with 2 spans inside. I want to color this div on red only when both spans are empty. When minimum one span have value I want to color this specific parent div on for example blue. How to do this? Now I colorize all my divs, but I want to colorize only parent with empty spans. My code below

 $('#t').on('click', function(){ var sum = 0; $('div span').each(function(){ sum += parseFloat($(this).text().length); if (sum != 0) { $(this).closest('section').find('.div').css("background", "blue"); } else { $(this).closest('section').find('.div').css("background", "red"); } }); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div class="container"> <div class="row"></div> <div class="row"> <div class="col-sm-3"> <div class="div"> <span></span> <span></span> </div> </div> <div class="col-sm-3"> <div class="div"> <span>b-1</span> <span>b-2</span> </div> </div> </div> <div class="row"></div> </div> </section> <section> <div class="container"> <div class="row"> <div class="col-sm-12"> <input type="button" value="ss" id="t"> </div> </div> </div> </section> 

Answer 1

Basically the problem is that you are applying the same css prop to both divs because you are iterating the spans.

This way, iteraing the divs you encapsulate the result and the css property is applied individually.

 $('#t').on('click', function(){ $('.div').each(function(){ var sum = 0; $(this).children().each(function(){ sum += parseFloat($(this).text().length); }) if (sum != 0) { $(this).css("background", "blue"); } else { $(this).css("background", "red"); } }); }); 

 .div{ min-height: 20px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div class="container"> <div class="row"></div> <div class="row"> <div class="col-sm-3"> <div class="div"> <span></span> <span></span> </div> </div> <div class="col-sm-3"> <div class="div"> <span>b-1</span> <span>b-2</span> </div> </div> </div> <div class="row"></div> </div> </section> <section> <div class="container"> <div class="row"> <div class="col-sm-12"> <input type="button" value="ss" id="t"> </div> </div> </div> </section> 

Answer 2

You could use a filter

 $('#t').on('click', function(e) { // just removed your other code for now e.preventDefault(); $('.div').css('background', 'blue') // start all divs as blue .filter(function() { return $(this).children('span:empty').length === 2; // filter any divs with 2 empty spans }).css('background', 'red'); // make filtered results red }); 

 .div { min-height: 100px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div class="container"> <div class="row"></div> <div class="row"> <div class="col-sm-3"> <div class="div"> <span></span> <span></span> </div> </div> <div class="col-sm-3"> <div class="div"> <span>b-1</span> <span>b-2</span> </div> </div> </div> <div class="row"></div> </div> </section> <section> <div class="container"> <div class="row"> <div class="col-sm-12"> <input type="button" value="ss" id="t"> </div> </div> </div> </section> 

Answer 3

jQuery.text - returns combined content of all selected elements. Then we can check the combined content of all child span s for each div .

$('#t').on('click', function(){
  var sum = 0;
  $('div').each(function(){
     if ($(this).find("span").length > 0) {
       if ($(this).find("span").text())
          $(this).css("background", "blue");
       else
          $(this).css("background", "red");
     }
  });
});

Answer 4

You're close but you need to target the elements differently. I should also note that you have no height/width set on your empty div so the red one will not show up at this time.

However, here is your code working now:

https://jsfiddle.net/wecLLgmc/

$('#t').on('click', function(){
  $('.div').each(function(){
    var sum = 0;
     sum += parseFloat($(this).find('span').text().length);    
     console.log(sum)
     if (sum === 0) {
        $(this).css("background", "red");
     } else {
        $(this).css("background", "blue");
     }
  });
});

Answer 5

Instead of targeting the spans directly, you can loop over the divs with the specified class and check if this div contains at least an empty span using $(this).find('span:empty').length , change its color directly using $(this).css() .

This is how should be your code:

$('#t').on('click', function() {
  var sum = 0;
  $('div.myDiv').each(function() {
    if ($(this).find('span:empty').length > 0) {
      $(this).css("background", "red");
    } else {
      $(this).css("background", "blue");
    }
  });
});

Demo:

 $('#t').on('click', function() { var sum = 0; $('div.myDiv').each(function() { if ($(this).find('span:empty').length > 0) { $(this).css("background", "red"); } else { $(this).css("background", "blue"); } }); }); 

 div.myDiv { min-height: 50px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div class="container"> <div class="row"></div> <div class="row"> <div class="col-sm-3"> <div class="myDiv"> <span></span> <span></span> </div> </div> <div class="col-sm-3"> <div class="myDiv"> <span>b-1</span> <span>b-2</span> </div> </div> </div> <div class="row"></div> </div> </section> <section> <div class="container"> <div class="row"> <div class="col-sm-12"> <input type="button" value="ss" id="t"> </div> </div> </div> </section>