jQuery选择具有空跨度的div

Question

我有2个跨度的div。 我只想在两个跨度都为空时将此div涂成红色。 当最小一个跨度具有值时，我想将此特定的父div着色为蓝色。 这个怎么做？ 现在我给所有的div上色，但是我只想给空白的span上色。 我的代码如下

 $('#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

基本上，问题在于您要对两个div应用相同的CSS道具，因为您要对范围进行迭代。

这样，迭代div即可封装结果，然后分别应用css属性。

 $('#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

您可以使用过滤器

 $('#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返回所有选定元素的合并内容。 然后，我们可以检查每个div的所有子span的组合内容。

$('#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

您已经很接近了，但是您需要针对不同的元素进行定位。 我还应注意，您没有在空div上设置高度/宽度，因此红色的此时不会显示。

但是，这是您的代码现在可以正常工作：

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

您可以使用$(this).find('span:empty').length直接检查指定的类的divs ，并检查该div是否至少包含一个空的span ，而不是直接定位spans $(this).find('span:empty').length $(this).css() 。

这应该是您的代码：

$('#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");
    }
  });
});

演示：

 $('#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>