如果元素为空或没有任何元素将类添加到其父容器中，则其他删除类

Question

如何使用if/else语句使用has()＆amp;不是jQuery中的has()？

在我单击.fig-caption的代码中，我想将active类添加到具有class="figcaption"的父元素。如果.fig-figcaption没有任何元素添加active类，则删除active类。

$(".figcaption figure > .fig-figcaption").on('click', function() {
  if ($(this).not(figcaption, span)) {
    $(this).parents(".figcaption").addClass("active");
  } else {
    $(this).parents(".figcaption").removeClass("active");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="figcaption">
  <figure>
    <div class="fig-figcaption"></div>
  </figure>
  <figure>
    <div class="fig-figcaption">
      <figcaption>Sed porttitor lectus nibh.</figcaption>
      <span class="photo-date">March 23, 2018</span>
      <span class="photo-title">Spinning Out of Control 1</span>
    </div>
  </figure>
  <figure>
    <div class="fig-figcaption">
      <span class="photo-date">March 23, 2018</span>
      <span class="photo-title">Spinning Out of Control 1</span>
    </div>
  </figure>
  <figure>
    <div class="fig-figcaption">
      <figcaption>Sed porttitor lectus nibh. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</figcaption>
      <span class="photo-date">March 23, 2018</span>
      <span class="photo-title">Spinning Out of Control 1</span>
    </div>
  </figure>
  <figure>
    <div class="fig-figcaption">
    </div>
  </figure>
  <figure>
    <div class="fig-figcaption">
      <figcaption>Sed porttitor lectus nibh. Vivamus magna justo</figcaption>
      <span class="photo-date">March 23, 2018</span>
      <span class="photo-title">Spinning Out of Control 1</span>
    </div>
  </figure>
</div>

Answer 1

使用查找和长度的组合

$(".figcaption figure > .fig-figcaption").on('click', function(){
//console.log($(this).find('figcaption, span'))
    if($(this).find('figcaption, span').length == 0) {
      $(this).parents(".figcaption").addClass("active");
    } else {
      $(this).parents(".figcaption").removeClass("active");
    }
  });

.active {
border:1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="figcaption">
  <figure>
    <div class="fig-figcaption"></div>
  </figure>
  <figure>
    <div class="fig-figcaption">
      <figcaption>Sed porttitor lectus nibh.</figcaption>
      <span class="photo-date">March 23, 2018</span>
      <span class="photo-title">Spinning Out of Control 1</span>
    </div>
  </figure>
  <figure>
    <div class="fig-figcaption">
      <span class="photo-date">March 23, 2018</span>
      <span class="photo-title">Spinning Out of Control 1</span>
    </div>
  </figure>
  <figure>
    <div class="fig-figcaption">
      <figcaption>Sed porttitor lectus nibh. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</figcaption>
      <span class="photo-date">March 23, 2018</span>
      <span class="photo-title">Spinning Out of Control 1</span>
    </div>
  </figure>
  <figure>
    <div class="fig-figcaption">empty
    </div>
  </figure>
  <figure>
    <div class="fig-figcaption">
      <figcaption>Sed porttitor lectus nibh. Vivamus magna justo</figcaption>
      <span class="photo-date">March 23, 2018</span>
      <span class="photo-title">Spinning Out of Control 1</span>
    </div>
  </figure>
</div>

Answer 2

您可以使用children()功能获取所有孩子。如果该结果的长度为0，则没有任何元素子节点。

还将parents()更改为closest()，因为它效率略高。

$(".figcaption figure > .fig-figcaption").on('click', function(){
    if($(this).children().length === 0) {
      $(this).closest(".figcaption").addClass("active");
    } else {
      $(this).closest(".figcaption").removeClass("active");
    }
  });

.active {
  background-color: blue;
}
.fig-figcaption {
  height: 20px;
  background-color: red;
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="figcaption" >
  <figure>
    <div class="fig-figcaption"></div>
  </figure>
  <figure>
    <div class="fig-figcaption">
      <figcaption>Sed porttitor lectus nibh.</figcaption>
      <span class="photo-date">March 23, 2018</span>
      <span class="photo-title">Spinning Out of Control 1</span>
    </div>
  </figure>
  <figure>
    <div class="fig-figcaption">
      <span class="photo-date">March 23, 2018</span>
      <span class="photo-title">Spinning Out of Control 1</span>
    </div>
  </figure>
  <figure>
    <div class="fig-figcaption">
      <figcaption>Sed porttitor lectus nibh. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</figcaption>
      <span class="photo-date">March 23, 2018</span>
      <span class="photo-title">Spinning Out of Control 1</span>
    </div>
  </figure>
  <figure>
    <div class="fig-figcaption">
    </div>
  </figure>
  <figure>
    <div class="fig-figcaption">
      <figcaption>Sed porttitor lectus nibh. Vivamus magna justo</figcaption>
      <span class="photo-date">March 23, 2018</span>
      <span class="photo-title">Spinning Out of Control 1</span>
    </div>  
 </figure>
</div>