如果另一个 div 为空，则在列表项中隐藏 div

Question

我在每个 <li> 元素中有多个 <div> 不同 class 的元素。如果其中一个有 testsimonial-content class 的是空的，我怎样才能在同一个 <li> 中隐藏 class testsimonial-heading 的另一个 div ？它不应该影响其他 <li>s.

这是我的 HTML 代码：

<ul>
    <li>
        <div class="testsimonial-heading">Testimonial</div>
        <div class="testsimonial-content">Hello this is a testimonial</div>
    </li>
    <li>
        <div class="testsimonial-heading">Testimonial</div> <!--This div should be hidden-->
        <div class="testsimonial-content"></div>
    </li>
    <li>
        <div class="testsimonial-heading">Testimonial</div>
        <div class="testsimonial-content">Hello this is a testimonial</div>
    </li>
</ul>

Answer 1

$('#ul li').each(function() {
  var div = $(this).find('.testsimonial-content');
  console.log(div.text().length);
  if (div.text().length === 0) {

    div.siblings('.testsimonial-heading').hide();

  }


})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id='ul'>
  <li>
    <div class="testsimonial-heading">Testimonial</div>
    <div class="testsimonial-content">Hello this is a testimonial</div>
  </li>
  <li>
    <div class="testsimonial-heading">Testimonial1232131</div>
    <!--This div should be hidden-->
    <div class="testsimonial-content"></div>
    <div class="testsimonial-">Other div</div>
  </li>
  <li>
    <div class="testsimonial-heading">Testimonial</div>
    <div class="testsimonial-content">Hello this is a testimonial</div>
  </li>
</ul>

使用 .find() 查找 class testsimonial-content 使用 .length 获取其长度，如果为零则使用 .siblings().hide()

隐藏其兄弟

Answer 2

就这么简单：

$(document).ready(function() {
    $(".testsimonial-content:empty").parent().hide(); 
    // if content is empty - then hide
});

或者这个如果你需要隐藏 li 如果 any of divs 是空的

$(document).ready(function() {
    $(".testsimonial-content:empty, .testsimonial-heading:empty").parent().hide(); 
    // if content OR heading is empty - then hide
});

这里是 working JSFiddle demo.

来自 OP 的更新：

Sorry I actually have more than 2 divs within each li, can you make it hide the class .testimonial-heading? What would be the updated javascript for this? Instead of hiding parent.

给你：

$(document).ready(function() {
    $(".testsimonial-content:empty").siblings(".testsimonial-heading").hide(); 
    // if content is empty - then hide heading in this li only
});

已更新 JSFiddle。

如果另一个 div 为空，则在列表项中隐藏 div

Hide div inside list item if another div is empty

javascript

jquery

hide