如果使用 data-id 为 null，则不显示答案

【问题标题】：display none if null using data-id如果使用 data-id 为 null，则不显示
【发布时间】：2016-12-03 17:43:22
【问题描述】：

我有一个菜单，其中列出了在另一个列表中显示内容的项目。

菜单

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

内容：

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

在内容中有些在li 中有.content。如何使用其中的 data-id 隐藏菜单部分中的项目？基本上菜单中的项目只有在有.content时才会显示

菜单的输出应该是这样的。

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

不要以为内容中的那个Item总是display:none; onload trigger。

也使用这个脚本：

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

这个控制列表的内容也激活菜单。

【问题讨论】：

吹毛求疵：window.onload = function () {...} 应该是$( window ).load( function() { ... } )，否则您可能会覆盖发生的其他 onload 事件（jQuery 允许以这种方式使用多个事件处理程序）。此外，如果您使用toggle()，则应使用hide() 和show() 以保持一致性而不是css('display','...')
感谢您注意到@XerenNarcy

标签： javascript jquery html css

【解决方案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 在 cmets 中所注意到的，您甚至可以使用 not() 和 has() 组合选择器：

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

你甚至可以使用hide()，而不是remove()。

Working example.

【讨论】：

您可以使用:has 选择器来简化此操作，例如：#gallery-container li[data-id]:has(.content)
你是对的，但应该是:not(:has(.content))，那么@XerenNarcy
不等...不是:not(:has())?
remove 从 DOM 中删除元素，您可能需要 .hide()
哈哈，@MIke，现在你删除了成功，因为我批评了你的另一个问题？ ;) 非常成熟。