Подсчет скрытых элементов

167
14 января 2019, 22:10

Есть фото галерея, она отображает 5 элементов, остальные скрыты при помощи свойства overflow : hiden, вопрос: как можно сделать подсчет и вывод числа скрытых элементов? Должно получиться вот так https://i.stack.imgur.com/zRZKU.png

#lightgallery { 
  overflow: hidden; 
  margin-top: 30px; 
  height: 122px; 
} 
 
#lightgallery img { 
  width: 176px; 
} 
 
#lightgallery a { 
  color: transparent; 
} 
 
#lightgallery a:nth-child(5) img { 
  filter: blur(5px); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="js/lightgallery.min.js"></script> 
<div id="lightgallery"> 
  <a href="assets/img/light1.jpg"> 
    <img src="assets/img/light1.jpg" alt=""> 
  </a> 
  <a href="assets/img/light2.jpg"> 
    <img src="assets/img/light2.jpg" alt=""> 
  </a> 
  <a href="assets/img/light3.jpg"> 
    <img src="assets/img/light3.jpg" alt=""> 
  </a> 
  <a href="assets/img/light4.jpg"> 
    <img src="assets/img/light4.jpg" alt=""> 
  </a> 
  <a href="assets/img/light5.jpg"> 
    <img src="assets/img/light5.jpg" alt=""> 
  </a> 
  <a href="assets/img/light4.jpg"> 
    <img src="assets/img/light4.jpg" alt=""> 
  </a> 
  <a href="assets/img/light5.jpg"> 
    <img src="assets/img/light5.jpg" alt=""> 
  </a> 
</div>

Answer 1

var invisible = 0; 
$('#lightgallery a').each(function(){ 
  if($(this).position().top > 0){ 
    invisible++; 
  } 
}) 
console.log(invisible);
#lightgallery { 
  overflow: hidden; 
  margin-top: 30px; 
  height: 122px; 
  position:relative;/*обязательно*/ 
} 
#lightgallery a{ 
  display:inline-block; 
} 
#lightgallery img { 
  width: 176px; 
} 
 
#lightgallery a { 
  color: transparent; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="lightgallery"> 
  <a href="assets/img/light1.jpg"> 
    <img src="https://picsum.photos/200/300/?random" alt=""> 
  </a> 
  <a href="assets/img/light2.jpg"> 
    <img src="https://picsum.photos/200/300/?random" alt=""> 
  </a> 
  <a href="assets/img/light3.jpg"> 
    <img src="https://picsum.photos/200/300/?random" alt=""> 
  </a> 
  <a href="assets/img/light4.jpg"> 
    <img src="https://picsum.photos/200/300/?random" alt=""> 
  </a> 
  <a href="assets/img/light5.jpg"> 
    <img src="https://picsum.photos/200/300/?random" alt=""> 
  </a> 
  <a href="assets/img/light4.jpg"> 
    <img src="https://picsum.photos/200/300/?random" alt=""> 
  </a> 
  <a href="assets/img/light5.jpg"> 
    <img src="https://picsum.photos/200/300/?random" alt=""> 
  </a> 
</div>

Answer 2

На чистом JS можно использовать Element.getBoundingClientRect()

Суть в том чтобы проверять смещение относительно viewport, если дочернее top смещение >= bottom смещению родителя, то элемент находится вне родителя.

Этот вариант не привязывается к одному ряду, можно сделать и два ряда или сто, хоть чтобы дети фото все вмещались в родителя, в любых случаях будет считать правильно.

В коде @Геннадий Журов вышесказанное работать не будет.

const a = document.querySelectorAll('#lightgallery a') 
let invisible = 0 
 
a.forEach(el => { 
  const { bottom } = el.parentNode.getBoundingClientRect() 
  const { top } = el.getBoundingClientRect() 
 
  if (top >= bottom) 
    invisible++ 
}) 
 
console.log('Спрятанных элементов: ' + invisible)
#lightgallery { 
  overflow: hidden; 
  margin-top: 30px; 
  height: 122px; 
  position: relative; /* important */ 
} 
 
#lightgallery a { 
  width: 176px; 
  display: inline-block; 
  height: 100%; 
} 
 
#lightgallery img { 
  width: 100%; 
} 
 
#lightgallery a { 
  color: transparent; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="lightgallery"> 
  <a href="assets/img/light1.jpg"> 
    <img src="https://picsum.photos/200/300/?random=1"> 
  </a> 
  <a href="assets/img/light2.jpg"> 
    <img src="https://picsum.photos/200/300/?random=2"> 
  </a> 
  <a href="assets/img/light3.jpg"> 
    <img src="https://picsum.photos/200/300/?random=3"> 
  </a> 
  <a href="assets/img/light4.jpg"> 
    <img src="https://picsum.photos/200/300/?random=4"> 
  </a> 
  <a href="assets/img/light5.jpg"> 
    <img src="https://picsum.photos/200/300/?random=5"> 
  </a> 
  <a href="assets/img/light4.jpg"> 
    <img src="https://picsum.photos/200/300/?random=6"> 
  </a> 
  <a href="assets/img/light5.jpg"> 
    <img src="https://picsum.photos/200/300/?random=7"> 
  </a> 
</div>

Answer 3

Решил свою задачу вот так, может кому пригодится, всем спасибо за помощь.

 var countPhoto = 0;
 countPhoto = $('#lightgallery a').length-5;
READ ALSO
Как из Django передать строку, математическое выражение, в JS?
javascript

Как из Django передать строку, математическое выражение, в JS?

Передаю с помощью шаблонизатора Jinja, данные из Django в JavaScriptКод выглядит примерно так:

 147
Замена на map vue.js
javascript

Замена на map vue.js

Всем привет,как будет выглядеть функция ,если заменить на map?

 169
Миксины(примеси) в es6?
javascript

Миксины(примеси) в es6?

Изучил миксины в es5 (те

 169
Сохранить позицию элемента
javascript

Сохранить позицию элемента

Подскажите пожалуйста, есть страница с перетаскиванием элемента

 190