データIDを使用してヌルの場合は表示されません

Question

私は他のリストのコンテンツを表示するアイテムをリストするメニューを持っています。

MENU

<ul id="gallery-list" style="display: none;"> 
     <li class="close"></li> 
     <li data-id="9425"><strong>item 1</strong></li> 
     <li data-id="9426"><strong>item 2</strong></li> 
     <li data-id="9488"><strong>item 3</strong></li> 
     <li data-id="9489"><strong>item 4</strong></li> 
     <li data-id="9495"><strong>item 5</strong></li> 
     <li data-id="9427"><strong>item 6</strong></li> 
</ul> 

CONTENT：一部はliで.contentを持っているコンテンツで

<ul id="gallery-container"> 
     <li data-id="9425"> 
      <h3 style="display: none;">Item 1</h3> 
      <div class="content">Content here</div> 
     </li> 
     <li data-id="9426"> 
      <h3 style="display: none;">Item 2</h3> 
     </li> 
     <li data-id="9488"> 
      <h3 style="display: none;">Item 3</h3> 
     </li> 
     <li data-id="9489"> 
      <h3 style="display: none;">Item 4</h3> 
     </li> 
     <li data-id="9495"> 
      <h3 style="display: none;">Item 5</h3> 
      <div class="content">Content here</div> 
     </li> 
     <li data-id="9427"> 
      <h3 style="display: none;">Item 6</h3> 
      <div class="content">Content here</div> 
     </li> 
</ul> 

。どのようにデータIDを使用してメニューセクション内の項目を非表示にすることができますか？基本的にメニュー内のアイテムは、.content

の場合にのみ表示する必要があります。メニューのOUTPUTはこのようにしてください。

<ul id="gallery-list" style="display: none;"> 
     <li class="close"></li> 
     <li data-id="9425"><strong>item 1</strong></li> 
     <li data-id="9495"><strong>item 5</strong></li> 
     <li data-id="9427"><strong>item 6</strong></li> 
</ul> 

これも大丈夫です。

<ul id="gallery-list" style="display: none;"> 
     <li class="close"></li> 
     <li data-id="9425"><strong>item 1</strong></li> 
     <li data-id="9425" style="display:none;"><strong>item 2</strong></li> 
     <li data-id="9425" style="display:none;"><strong>item 3</strong></li> 
     <li data-id="9425" style="display:none;"><strong>item 4</strong></li> 
     <li data-id="9495"><strong>item 5</strong></li> 
     <li data-id="9427"><strong>item 6</strong></li> 
</ul> 

は常にdisplay:none; onloadイベントのトリガされたコンテンツではないという項目を取ります。

はまた、このスクリプトを使用して：

$("#gallery-list li").click(function() { 
     var id = $(this).data('id'); 
      $("#gallery-container").find('li').each(function() { 
      $(this).find('.content').toggle($(this).data('id') === id); 
      $(this).find('h3').toggle($(this).data('id') === id); 
     }); 
    }); 
    window.onload = function() { 
     $("#gallery-container li .content").css("display", "none"); 
     $("#gallery-container li h3").css("display","none"); 
     $("#gallery-container li p").css("display","none"); 
    } 
    $('.gallery-menu h3, #gallery-list li').click(function(){ 
     $("#gallery-list, .gallery-menu h3").toggle(); 
    }); 

これは、リストの内容は、メニューをアクティブに制御します。

Answer 1

マイ延期アイデア：
ループコンテンツリストの項目と全く.contentは、内部remove関連メニュー項目ありません。

$(function() { 
    $("#gallery-container li[data-id]").each(function() { 
     if($(".content", this).length == 0) { 
      $("#gallery-list li[data-id=" + $(this).data("id") + "]").remove(); 
     } 
    }); 
}); 

@XerenNarcyコメントに気づいたとして、あなたもnot()とhas()組み合わせセレクタを使用することができます。

$(function() { 
    $("#gallery-container li[data-id]:not(:has(.content))").each(function() { 
     $("#gallery-list li[data-id=" + $(this).data("id") + "]").remove(); 
    }); 
}); 

代わりのremove()あなたもhide()を使用yould。

Working example.