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

时间:2017-12-19 12:59:48

标签: javascript jquery

我有一个包含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”内部具有空“化身”的类日期?

6 个答案:

答案 0 :(得分:5)

你应该能够用纯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>

答案 1 :(得分:4)

您可以使用: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>

答案 2 :(得分:0)

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

&#13;
&#13;
$('.list li').each(function(){
  if($('.avatar',this).children().length == 0){
    $('.date',this).css({'color' : '#c7c7c7'});
  }
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

  

它正在工作,但这会改变所有div的颜色,类为'date'

您可以eachsiblings

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

答案 4 :(得分:0)

您可以使用jquery的lbOne.Items.Insert(insertAtIndex, dragDropData); filter获取必要的子集,并对结果执行function更改:

css

答案 5 :(得分:-1)

尝试将日期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'});

谢谢,