Michael Pon Michael Pon - 4 months ago 18
CSS Question

display none if null using data-id

I have a menu which list items which display the the content on the other list.

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:

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


In the content some have
.content
in the
li
. How can I use the data-id in that to hide the item in the menu section? Basically items in the menu should only be display if it has a
.content


OUTPUT of the MENU should be like this.

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


Or this should be okay too.

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


Take not that Item in the content are always
display:none;
onload trigger.

Also using this script:

$("#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();
});


This controls the contents of the list also activate the menu.

Answer

My frist idea:
Loop the content list items and when no .content is available inside, remove the related menu item.

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

As @XerenNarcy noticed in the comments, you can even use a not() and has() combined selector:

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

Instead of remove() you yould even use hide().

Working example.