jQuery - выберите контейнер, у которого есть только определенное количество дочерних элементов.

Question

У меня есть div s, которые все являются братьями и сестрами.Внутри каждого div есть несколько изображений прямых детей.Я хочу выбрать div s, который имеет только более 5 изображений внутри, и добавить 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>

jQuery фрагмент, который я написал:

$( 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>");
        }
});  

Answer 1

Вы можете использовать приведенный ниже код

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

: селектор nth-of-type (), это будет работать, только если элементы img являются прямыми потомками элемента .main

Answer 2

Ваше объяснение в вопросе и фрагмент, который вы написали, не совпадают.Однако следующее должно сделать необходимое.

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

Проверьте эту скрипку out.

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

Более простой способ - запросить, комбинируя .has () , : nth-child () и > селектор

длянапример, выберите .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/