子divクラスにコンテンツがない場合は、同じクラス名の親divが複数ある場合は非表示にします

Question

スライダーには、スライダー内の一部の画像にオプションの写真クレジットを含むスライダーがありますポッパー。すべてのポッパーインスタンスを繰り返し処理したいと思います。.photo-credit pクラスのpタグがすべて空の場合、その親ポッパーのインスタンスだけを非表示にします。私は、いくつかの他の投稿からソリューションをまとめようとしましたが、動作させることができませんでした。私が持っているコードは、すべての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(); 
    } 

}); 

それはouを指す価値がある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(); 
 
});

<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>