如何用jQuery选择含5张以上img的div容器并追加元素？

嘿，我来帮你搞定这个需求！你的目标是找出那些包含5张及以上直接子元素img的.main div，然后给它们追加元素对吧？咱们先梳理下现有代码里的问题，再给出正确的实现方案。

先说说你的代码里的几个问题 #

1. 错误的数量判断：你写的$(".main").children('img').length > 20是计算了所有.main下的img总数，不是单个div内的数量，这样根本没法筛选出符合条件的单个div；
2. 逻辑混乱的循环：两个$.each循环的目的不明确，而且第二个循环还存在语法错误（缺少闭合括号）；
3. 错误的条件分支：你的if(count2 === true)判断的是全局img总数，不是每个div的情况，完全达不到筛选单个div的效果。

正确的实现方案 #

我们可以用jQuery的.filter()方法来精准筛选符合条件的div，然后直接给这些div追加元素，代码简洁又高效：

完整HTML代码（整理后更清晰）

<div class="main"> 
  <img> 
</div> 
<div class="main"> 
  <img> 
  <img> 
  <img> 
  <img> 
  <img> 
  <img> 
  <img> 
  <img> 
</div> 
<div class="main"> 
  <img> 
  <img> 
  <img> 
</div> 
<div class="main"> 
  <img> 
</div> 
<div class="main"> 
  <img> 
</div> 
<div class="main"> 
  <img> 
</div>

正确的jQuery代码

$(document).ready(function() {
  // 筛选出包含5张及以上直接子元素img的.main div
  $('.main').filter(function() {
    // 对每个.main元素，判断其直接子元素img的数量是否大于5
    return $(this).children('img').length > 5;
  }).append('<div class="additional-div">这里是追加的新div内容</div>');
  // 如果你的需求是追加a标签，就改成：.append('<a class="show-more">See More</a>')
});

代码解释 #

1. .filter()方法：遍历所有.main元素，对每个元素执行内部的判断逻辑，只保留返回true的元素；
2. $(this).children('img').length：针对当前遍历的单个.main元素，获取它的直接子元素img的数量（.children()只会找直接子元素，符合你的需求）；
3. .append()方法：给筛选出来的符合条件的div，在其内部末尾追加你需要的元素（可以是div、a标签或者其他任意HTML元素）。

这样就能精准实现你想要的效果啦！

内容的提问来源于stack exchange，提问作者Faizal Munna