子divが空の場合、親divを削除します。

Question

親divの全体を削除しようとしましたが、wc-galleryクラスが存在しません。私の脚本には、私が必要とするものとは逆のものがあります。基本的にそれはwc-galleryを持つすべてを隠します。

SCRIPT：

// Additional Scripts 
$(window).load(function() { 
    $(".gallery-container2 .gallery-item .wc-gallery").hide(); 
}); 
$(".gallery-container2 p").click(function() { 
    var id = $(this).data('id'); 
    $("[data-id=" + id + "].gallery-item .wc-gallery").toggle() 
}); 


$(function(){ 
    $(".gallery-item").each(function(){ 
     $(this).children('.wc-gallery').parents('.gallery-container2').hide(); 
    }); 
}); 

私はすべてのコンテナを非表示にする場合は基本的にこれが正常に動作しますし、私のコンテンツが原因スクリプトの競合に表示されませんけれども、その後、子のdivを表示します。コンフリクトなしにこれを解決する唯一の方法は、最初にすべてのコンテナをロードし、次にhide()またはremove()をロードすることです。

SCRIPT：（コンテンツのレンダリングをonloadイベントに起因する紛争）

$('.gallery-container2').hide(); 
$(function(){ 
    $(".gallery-item").each(function(){ 
     $(this).children('.wc-gallery').parents('.gallery-container2').show(); 
    }); 
}); 

HTML：（第一セットは1が見える第二セットでなければなりません削除または非表示にする必要がある1です）

<ul> 
    <li><div class="gallery-container2"> 
     <p data-id="1723"><strong>some text</strong></p> 
     <div class="gallery-item" data-id="1723"> 
      <div class="wc-gallery" style="display: none;"></div> 
     </div> 
    </div></li> 
    <li><div class="gallery-container2"> 
     <p data-id="2455"><strong>View before and after</strong></p> 
     <strong></strong> 
     <div class="gallery-item" data-id="2455"> 
      <div><div></div></div> 
     </div> 
    </div></li> 
</ul> 

Answer 1

'.gallery-container2'要素をループし、 '.wc-gallery'の子があるかどうかを調べます。要素を隠さない場合

$('.gallery-container2').each(function(){ 
    var $this = $(this); 

    //find element with 'wc-gallery' class 
    var hasGallery = $this.find('.wc-gallery').length > 0; 

    if(!hasGallery){ 
     $this.hide(); 
    } 
}); 

Answer 2

これを試してください。 divにクラス.wc-galleryの子がある場合は、それ以外の場合は親を表示し、そうでない場合は親を非表示にします。

$(function() { 
    $(".gallery-item").each(function() { 
    if($(this).children('.wc-gallery').length > 0) 
     $(this).parents('.gallery-container2').show(); 
    else 
     $(this).parents('.gallery-container2').hide(); 
    }); 
}); 

Answer 3

純粋なJSあなたはES6用語でこれを行うかもしれません。

var divsToHide = document.querySelectorAll("div div :not(.wc-gallery)"); 
 
for (var div of divsToHide) div.parentElement.parentElement.style.display = "none";

<div class="gallery-container2"> 
 
    <p data-id="1723"><strong>some text</strong> 
 
    </p> 
 
    <div class="gallery-item" data-id="1723"> 
 
    <div class="wc-gallery">first container</div> 
 
    </div> 
 
</div> 
 

 
<div class="gallery-container2"> 
 
    <p data-id="1724"><strong>some text</strong> 
 
    </p> 
 
    <div class="gallery-item" data-id="1724"> 
 
    <div> 
 
     <div>second container</div> 
 
    </div> 
 
    </div> 
 
</div>