如果另一個div為空，則將div隱藏在列表項中

Question

我在每個<li>元素中有幾個不同類的<div>元素。 如果其中一個具有testsimonial-content類別的testsimonial-content空，那么如何在同一個<li>中也隱藏class testsimonial-heading另一個div ？ 它不應該影響其他<li> 。

這是我的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()查找類testsimonial-content使用.length獲得其長度，如果為零，則使用.siblings().hide()隱藏其同級.siblings().hide()

Answer 2

就這么簡單：

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

如果您需要隱藏li或者如果div的任何一個為空，則為this

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

這是工作中的JSFiddle演示 。

從OP更新：

抱歉，我實際上在每個li內有2個以上的div，您可以使其隱藏類.testimonial-heading嗎？ 什么是為此更新的javascript？ 而不是隱藏父級。

干得好：

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

更新了JSFiddle 。