jQuery 遍历 DOM

Question

我有以下代码：

<p class="represent">Representing</p>
<div class="clients_wrap">
    <ul class="clients">
        <li><img src="{{ client.get_sized_image }}"></li>
    </ul>
</div>

这个块被重复了很多次。列表项的数量可能在 0 到 10+ 之间变化，但如果是 0，那么我需要隐藏它之前的 p.represent 标记——这需要独立于每个重复的代码块。

我尝试了很多方法，但无法完全弄清楚，例如

function hideEmptyClients() {
    if ( $('ul.clients li').length >= 1 ) {
        $('ul.clients').parent().closest('p').hide();
    }
}
$(function() {
    hideEmptyClients();
});

已解决： Tomalak 提供的最佳解决方案：

$(function () {
    $('ul.clients:not(:has(li))').closest(".represent_wrap").hide();
});

Answer 1

首先，您所拥有的逻辑似乎与您所描述的相反-如果找到多个 li 元素，则隐藏 p 元素，而不是如果没有。其次，closest() 查看父元素，其中p 是div 的兄弟，因此您需要改用prev()。试试这个：

$('.clients').each(function() {
    var $ul = $(this);
    if (!$('li', $ul).length) {
        $ul.closest('.clients_wrap').prev('p').hide();
    }
});

Answer 2

$(function() {
    $('p.represent').filter(function () {
        return $(this).next("clients_wrap").find("li").length === 0;
    }).hide();
});

这背后的基本原理遵循 jQuery 范例：

1. 选择一些东西 ($('p.represent'))
2. 可选择过滤它 (.filter(...))
3. 做点什么 (.hide())