更改某个条件下父div的颜色

Question

我有一个html代码，如下所示

<div class="class1">
    <div class="class2">
        <span class="span1"></span>

如果class="span1“的跨度在开始标记和结束标记之间没有值，我想用class="class1”更改div的颜色。

然而，span在加载后被javascript填充，所以我应该用JS还是CSS来改变颜色？有人能告诉我怎么做吗？

我没有任何示例代码可供显示，因为我不确定如何开始

Answer 1

要确定指定元素的标记之间是否没有任何内容，请使用jQuery提供的html()函数。要更改父对象的样式，请使用parent()和css()函数。要等到DOM加载完成，请使用ready()函数。

​

$(document).ready(function() {
  if (!$('.span1').html()) {
    $('.span1').parent().css({ color: 'red' });
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1">
  <div class="class2">text
    <span class="span1"></span>
  </div>
</div>

​

Answer 2

document.getElementsByClassName("span1")[0].parentElement.parentElement.style.color = "green";

Answer 3

你不能通过css来“往上走”，只能往下走，所以你必须用js来做到这一点。以下是som示例代码：

​

$(function(){
   $(".span1").each(function(){
      if($(this).html() == ""){
          $(this).closest(".class1").css("background-color", "red")
      }
   })
})

span{
  height: 10px;
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="class1">
    <div class="class2">
        <span class="span1"></span>
    </div>
</div>
<div class="class1">
    <div class="class2">
        <span class="span1">filled</span>
    </div>
</div>

​