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

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

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

1. 选择某物 ( $('p.represent'))
2. 可选择过滤它 ( .filter(...))
3. 对它做点什么 ( .hide())

Answer 2

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

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