当另一个空时，将类添加到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”内部具有空“化身”的类日期？

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()个孩子的长度：

＆＃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;

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的lbOne.Items.Insert(insertAtIndex, dragDropData); filter获取必要的子集，并对结果执行function更改：

css

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'});

谢谢，