Question

如何在jQuery中将if而不是else与has() / 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>

如果element为空或没有任何元素，请向其父容器添加类，否则删除类

2 个答案: