jQuery - 选择一个只有超过一定数量的孩子的容器

Posted 2023-05-09

【中文标题】jQuery - 选择一个只有超过一定数量的孩子的容器

【英文标题】：jQuery - select a container which has only more than certain amount of children

【发布时间】：2018-11-03 04:08:20

【问题描述】：

我有一些divs，它们都是兄弟姐妹。在每个 div 内有多个图像作为直接子级。我想选择 divs 里面只有超过 5 张图片，并使用 jQuery 将 div 添加到其中。

我的方法如下。

<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 sn-p是

$( document ).ready(function() 
    //var countimg = $(".main").find('img').length;
    var count2 = $(".main").children('img').length > 20;
    //console.log(countimg);
    //console.log(count2);
    if(count2 === true)
        //var i = 0;

        $.each($('.main img'), function (index, value)              
            //i++;
            console.log('um inside'+i);
            //if(i > 10)
                $(this).css('display','block');
            //else
            //    $(this).css('display','block');
            // 

            return ( index !== "three" );
        );




        $.each($('.main img'), function (index, value)    
                $(this).css('display','none');
        
        $(this).parent().append("<a class='show-more'>See More</a>");
        
);  

【问题讨论】：

你说的是 5 但代码显示的是 20...

【参考方案1】：

更简单的方法是结合.has()、:nth-child()和> selector进行查询

例如, 选择.main 至少有5 个直接img 孩子

$('.main').has('>img:nth-child(5)');

用于追加

$('.main').has('>img:nth-child(5)').append("<a class='show-more'>See More</a>");

演示：https://jsfiddle.net/jacobgoh101/tj48zgLf/2/

【参考方案2】：

即使您不知道您的子元素将是什么，以下解决方案也会有所帮助。

这里有<img>，但即使容器有不同的子元素，下面的解决方案也可以工作。

let certainAmount = 5;
const $container = $('.main');

$container.each(function()
  let $this = $(this);
  
  console.log($this.find('> *').length);
  
  if(($this.find('> *').length) > (certainAmount - 1) ) 
    //Selected and do something.
    $this.addClass('selected');
  
);

.main 
  padding: 5px;
  border:1px solid #a29e9e;
  background: #e8e8e8;

.main.selected 
  background: green;
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

更新：附加到选定的容器中

let certainAmount = 5;
const $container = $('.main');

$container.each(function()
  let $this = $(this);
  
  console.log($this.find('> *').length);
  
  if(($this.find('> *').length) > (certainAmount - 1) ) 
    //Selected and do something.
    $this.addClass('selected').append("<button>Show More</button>");
  
);

.main 
  padding: 5px;
  border:1px solid #a29e9e;
  background: #e8e8e8;

.main.selected 
  background: green;
 
 img 
  height: 5px;
  width: 5px;
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

【讨论】：

是否可以让这个页面每次都加载新内容？

是的，完全有可能。您可以根据需要将上述代码放入函数中并调用该函数。加载更多内容的 JS 代码，终于可以调用上面代码的函数了。

我添加了另一个问题，您可以检查一下吗？

当然让我检查一下。

@Faizal Munna，我希望你得到了邮件 ID。

【参考方案3】：

你在问题​​中的解释和你写的 sn-p 似乎不匹配。但是，以下应该可以满足需要。

$("div.main").each(function()
    var imgCount = $(this).find("img").length;
  if(imgCount > 5)
    //Do what you wanna do
    console.log(imgCount);
  
); 

签出this fiddle。

【讨论】：

我们可以使用这段代码只选择特定的 div 并在其中添加一个 div 吗？

@FaizalMunna 是的，您可以在 if() 条件中添加 $(this).append("<a class='show-more'>See More</a>");。

@NewToJS no 如果我这样添加，它将选择所有 div s

【参考方案4】：

你可以使用下面的代码

$('.main:has(img:nth-of-type(5))').append('<a class="show-more">See More</a>');

:nth-of-type() 选择器，仅当 img 元素是 .main 元素的直接子元素时才有效