jQuery：如果只有 2 个子对象（或更少），则隐藏父对象答案

【问题标题】：jQuery: hide parent if there's only 2 child objects (or less)jQuery：如果只有 2 个子对象（或更少），则隐藏父对象
【发布时间】：2015-04-27 15:27:30
【问题描述】：

如果父对象只包含两个或更少的子对象，我需要隐藏它。 szenario 是：我将事件列为<div class="event">，每个事件都有一个 url 和一个标题。此外，每个event 都可以有各种类型的participants——或者没有。如果没有列出参与者，我希望 jQuery 删除该条目。

到目前为止，我所拥有的是：

// Hide empty events
if(($(".event").children().length)<3) { 
$(this).hide();
}

但这没有任何影响。

在不同的内容类型上，我使用它来检查（并删除）空父母：

$("description:empty").parent().hide();

我很想将这一行应用到我的“事件任务”中，但是数据结构/xslt 转换太不同了，无法应用相同的简单功能。欢迎大家指点！

【问题讨论】：

标签： javascript jquery xslt

【解决方案1】：

您需要检查event 的实例，否则您将拥有所有事件的子项的集合

您可以使用$.each 或filter() 遍历它们

$(".event").filter(function(){
    return $(this).children().length < 3;
}).hide();

【讨论】：

这也回避了 OP 原始代码中不正确的 this。 :)

【解决方案2】：

你必须循环你的元素来检查它们这是我的代码来做到这一点

$(document).ready(function(){
$(".event").each(function(){
  if(($(this).children().length)<3) { 
    $(this).hide();
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="event" >
<span>1</span>
  <span>1</span>
  <span>1</span>
</div>
<div class="event" >
<span>1</span>
<span>1</span>
</div>
<div class="event" >
<span>1</span>
</div>
<div class="event" >
<span>1</span>
<span>1</span>
  <span>1</span>
  <span>1</span>
  <span>1</span>
</div>

【讨论】：

带有布尔回调的filter 通常比使用each 循环更简洁。