当另一个空时，将类添加到div

Question

我有一个包含3个div的列表。有头像，价值和数据。

if ($('.avatar').length === 0) {
  $('.date').css({
    'color': '#c7c7c7'
  });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <ul class="list">

    <li>
      <div class="avatar"><img src=...></img>
      </div>
      <div class="value">000</div>
      <div class="date">0 semptember</div>
    </li>

    <li>
      <div class="avatar"></div>
      <div class="value">000</div>
      <div class="date">0 semptember</div>
    </li>

    <li>
      <div class="avatar"><img src=...></img>
      </div>
      <div class="value">000</div>
      <div class="date">0 semptember</div>
    </li>
  </ul>
</div>

我列表中的一些“li .avatar”是空的。我想改变头像空的日期颜色。

我正在尝试用它做：

if ($('.avatar').length === 0) {
   $('.date').css({'color' : '#c7c7c7'});
};

它正在工作，但这改变了所有div的颜色与类'date'。如何更改代码，以便仅将样式添加到“li”内的具有空“avatar”的类日期？

Answer 1

你应该能够用纯CSS实现这个目标：

.avatar:empty ~ .date {
   color: #c7c7c7;
}

.avatar:empty~.date {
  color: #c7c7c7;
}

<div class="row">
  <ul class="list">

    <li>
      <div class="avatar"><img src=...></img>
      </div>
      <div class="value">000</div>
      <div class="date">0 semptember</div>
    </li>

    <li>
      <div class="avatar"></div>
      <div class="value">000</div>
      <div class="date">0 semptember</div>
    </li>

    <li>
      <div class="avatar"><img src=...></img>
      </div>
      <div class="value">000</div>
      <div class="date">0 semptember</div>
    </li>
  </ul>
</div>

Answer 2

您可以使用:empty selector来定位空的.avatar元素然后使用.siblings(selector)来获取目标元素.date

$('.list li .avatar:empty').siblings('.date').css({'color' : '#c7c7c7'});

$('.list li .avatar:empty').siblings('.date').css({'color' : '#c7c7c7'});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <ul class="list">

    <li>
      <div class="avatar"><img src=...></img>
      </div>
      <div class="value">000</div>
      <div class="date">0 semptember</div>
    </li>

    <li>
      <div class="avatar"></div>
      <div class="value">000</div>
      <div class="date">0 semptember</div>
    </li>

    <li>
      <div class="avatar"><img src=...></img>
      </div>
      <div class="value">000</div>
      <div class="date">0 semptember</div>
    </li>
  </ul>
</div>

Answer 3

您可以循环浏览列表并通过.avatar函数检查.each()孩子的长度：

$('.list li').each(function(){
  if($('.avatar',this).children().length == 0){
    $('.date',this).css({'color' : '#c7c7c7'});
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<ul class="list">

 <li>
  <div class="avatar"><img src=...></img></div>
  <div class="value">000</div>
  <div class="date">0 semptember</div>
</li>

<li>
  <div class="avatar"></div>
  <div class="value">000</div>
  <div class="date">0 semptember</div>
</li>

<li>
  <div class="avatar"><img src=...></img></div>
  <div class="value">000</div>
  <div class="date">0 semptember</div>
</li>
</ul>
</div>

Answer 4

它正在工作，但是这个改变所有div的颜色与类'date'

你可以each和siblings

$('.avatar').each( function(){
    if ( $( this ).html().trim().length === 0 ) 
    {
       $(this).siblings( ".date" ).css({'color' : '#c7c7c7'});
    };    
})

演示

$('.avatar').each(function() {
  if ($(this).html().trim().length === 0) {
    $(this).siblings( ".date" ).css({
      'color': '#c7c7c7'
    });
  };
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <ul class="list">

    <li>
      <div class="avatar"><img></div>
      <div class="value">000</div>
      <div class="date">0 semptember</div>
    </li>

    <li>
      <div class="avatar"></div>
      <div class="value">000</div>
      <div class="date">0 semptember</div>
    </li>

    <li>
      <div class="avatar"><img></div>
      <div class="value">000</div>
      <div class="date">0 semptember</div>
    </li>
  </ul>
</div>

Answer 5

您可以使用jquery的filter function获取必要的子集，并对结果执行css更改：

$("li.avatar").filter(function() {
    return !$(this).text();
}).each(function() {$(this).siblings(".date").css({'color' : '#c7c7c7'});})

Answer 6

尝试将日期div包装在内部并按下面的方式编写java脚本。

<li>
  <div class="avatar"><img src=...></img>
     <div class="date">0 semptember</div>
  </div>
  <div class="value">000</div>

</li>

var $div = $(this);
$div.find('.date').css({'color' : '#c7c7c7'});

谢谢，