jQuery选择具有空跨度的div

Question

我的div里面有2个跨度。我想在两个跨度都是空的时候将这个div用红色着色。当最小一个跨度具有值时，我想要将该特定父div设置为例如蓝色。这该怎么做？现在我着色所有我的div，但我想只用空跨度着色父级。我的代码在下面

$('#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 prop，因为你正在迭代跨度。

这样，迭代你封装结果的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 - 返回所有选定元素的组合内容。然后，我们可以检查每个span的所有子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

你很接近，但你需要以不同的方式定位元素。我还应该注意，你的空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

您可以使用指定的类循环spans，而不是直接定位divs，并使用{{检查此div是否至少包含空span 1}}，使用$(this).find('span:empty').length直接更改颜色。

这应该是你的代码：

$(this).css()

<强>演示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;