如果子div類沒有內容時，如果有多個具有相同類名的父div，請隱藏父級div類

Question

我有一個滑塊，其中滑塊中的某些圖像可以包含可選的包含文本或鏈接的圖片信用波普爾。我想遍歷所有popper實例，如果.photo-credit p類中的所有p標籤都爲空，則只隱藏父popper的實例。我試圖拼湊一些其他帖子的解決方案，但一直沒有得到它的工作。如果所有p標籤對於那個popper都是空的，我的代碼不會隱藏popper。我是一個JavaScript新手，並會感謝任何幫助。

HTML

<div class="slider-wrapper"> 
<!--Required Root Element--> 
<div class="slider"> 
    <!--Required List Element--> 
    <div class="slider-list"> 
     <div class="slider-item"> 
      <div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" /></div> 
      <div class="slider-content-container"> 
       <h1>B LIne: The Place to Be</h1> 
       <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div> 
      </div> 
      <div class="popper"> 
       <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" /> 
      </div> 
      <div class="photo-credit hide"> 
       <p><p><a href="http://www.someurl.com">A photo credit</a>.</p></p> 
       <p></p> 
      </div> 
     </div><div class="slider-item"> 
      <div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div> 
      <div class="slider-content-container"> 
       <h1>July 4th: You missed it!</h1> 
       <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div> 
      </div> 
      <div class="popper"> 
       <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" /> 
      </div> 
      <div class="photo-credit hide"> 
       <p></p> 
       <p></p> 
      </div> 
     </div><div class="slider-item"> 
      <div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div> 
      <div class="slider-content-container"> 
       <h1>Festival coming Aug. 31st!</h1> 
       <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div> 
      </div> 
      <div class="popper"> 
       <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" /> 
      </div> 
      <div class="photo-credit hide"> 
       <p></p> 
       <p></p> 
      </div> 
     </div> 
    </div> 
</div> 

<a href="#" class="slider-control-prev"><img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg"></a> 
<a href="#" class="slider-control-next"><img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg"></a> 

<p class="slider-pagination"></p> 

</div> 

的JavaScript

 $('.popper').each(function() { 
      //var $thisPopper = $(this); 
      var hasContent = 0; 
      $('.photo-credit p').each(function() { 
       if($(this).html().length > 0) { 
        hasContent++; 
       } 
      }); 
      if(hasContent > 0){ 
       //$thisPopper.hide(); 
       $(this).hide(); 
      } 
     }); 

Answer 1

你是在正確的方向。然而，在你的JavaScript中的幾個錯誤。 你試圖用「popper」類來定位所有div。不過，擁有「popper」和「photo-credit」的div在同一水平上。爲什麼不改用他們的父母的div？

試試看看這個代碼。它已經測試（Link to jsfiddle）

$('.slider-item').each(function() { 
     var thisSilerItem = $(this); 
     var hasContent = 0; 
     thisSilerItem.find('.photo-credit p').each(function() { 
      if($(this).html().length > 0) { 
       hasContent++; 
      } 
     }); 
     if(hasContent <= 0){ 
      thisSilerItem.find('.popper').hide(); 
     } 
    }); 

編輯： 獎勵： 如果你的頁面有大量的滑塊，這個jQuery解決方案將導致一些UX問題（頁面加載後/「跳躍」的div）

嘗試使用CSS解決方案。

當您呈現您的DOM元素。如果「photo-credit」的內容爲空，請將類添加到「popper」div。

<div class="popper hide"> 
// img 
</div> 

然後在你的CSS，添加

.popper.hide { display: none; } 

Answer 2

很難完全猜你想要做什麼，但如果我理解正確的話......

$('.popper').each(function() { 

    var photoCredit = $(this).find(".photo-credit p") 

    if ($(photoCredit).is(':empty')){ 
     $(this).hide(); 
    } 

}); 

這是值得指出的t CSS4開發人員正在研究'擁有'選擇器，但截至2017年7月，尚不支持任何瀏覽器。

預計以下列方式工作：

.popper:has(> p:empty) { display: none } 

我希望這可以幫助... :)

Answer 3

您可以檢查這些代碼。

 $.each($('.popper'), function (index, popper) { 
      var isEmptry = true; 
      $.each($(popper).next('.photo-credit').children(), function (index, ptag) { 
       if ($.trim($(ptag).html()) != '') 
        isEmptry = false; 
      }); 
      if (isEmptry) 
       $(popper).hide(); 
     }); 

工作代碼

$.each($('.popper'), function (index, popper) { 
 
    var isEmptry = true; 
 
    $.each($(popper).next('.photo-credit').children(), function (index, ptag) { 
 
     if ($.trim($(ptag).html()) != '') 
 
      isEmptry = false; 
 
    }); 
 
    if (isEmptry) 
 
     $(popper).hide(); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<div class="slider-wrapper"> 
 
    <!--Required Root Element--> 
 
    <div class="slider"> 
 
     <!--Required List Element--> 
 
     <div class="slider-list"> 
 
      <div class="slider-item"> 
 
       <div class="slider-image-container"> 
 
        <img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" /> 
 
       </div> 
 
       <div class="slider-content-container"> 
 
        <h1>B LIne: The Place to Be</h1> 
 
        <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div> 
 
       </div> 
 
       <div class="popper"> 
 
        <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" /> 
 
       </div> 
 
       <div class="photo-credit hide"> 
 
        <p> 
 
         <p><a href="http://www.someurl.com">A photo credit</a>.</p> 
 
        </p> 
 
        <p></p> 
 
       </div> 
 
      </div> 
 
      <div class="slider-item"> 
 
       <div class="slider-image-container"> 
 
        <img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /> 
 
       </div> 
 
       <div class="slider-content-container"> 
 
        <h1>July 4th: You missed it!</h1> 
 
        <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div> 
 
       </div> 
 
       <div class="popper"> 
 
        <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" /> 
 
       </div> 
 
       <div class="photo-credit hide"> 
 
        <p></p> 
 
        <p></p> 
 
       </div> 
 
      </div> 
 
      <div class="slider-item"> 
 
       <div class="slider-image-container"> 
 
        <img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /> 
 
       </div> 
 
       <div class="slider-content-container"> 
 
        <h1>Festival coming Aug. 31st!</h1> 
 
        <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div> 
 
       </div> 
 
       <div class="popper"> 
 
        <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" /> 
 
       </div> 
 
       <div class="photo-credit hide"> 
 
        <p></p> 
 
        <p></p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <a href="#" class="slider-control-prev"> 
 
     <img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg"></a> 
 
    <a href="#" class="slider-control-next"> 
 
     <img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg"></a> 
 

 
    <p class="slider-pagination"></p> 
 

 
</div>