jQuery - 选择一个只有一定数量子级的容器

Question

我有一些Hello world s都是兄弟姐妹。在每个div中，有多个图像作为直接子项。我想选择其中只有5个以上图像的div，并使用jQuery将div附加到其中。

我的方法如下：

div

我写的jQuery片段是

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

Answer 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/

Answer 2

您在问题中的解释和您撰写的代码段似乎不匹配。但是，以下内容应该是必要的。

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

检查this fiddle。

Answer 3

即使你不知道你的孩子要素是什么，下面的解决方案也会有所帮助。

这里有<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>

Answer 4

您可以使用以下代码

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

：nth-​​of-type（）选择器，仅当img元素是.main元素的直接子元素时才会起作用