Javascript-форум - Как показать только первые несколько элементов в блоке?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как показать только первые несколько элементов в блоке? (https://javascript.ru/forum/dom-window/80434-kak-pokazat-tolko-pervye-neskolko-ehlementov-v-bloke.html)

Как показать только первые несколько элементов в блоке?

На странице имеются блоки .container с вложенными в них элементами. Подскажите, пожалуйста, как показывать только первые 3 элемента в блоке? И в случае, если в блоке больше трех элементов, то остальные прятать и выводить ссылку с количеством скрытых в блоке элементов. Как это можно реализовать? Спасибо!

$(document).ready(function() {
  $('.container').find('span:gt(2)').hide()
  $('.container').append('<div class="add">Ещё</div>');
  $('.add').append('<div class="number_hidden"></div>');
  $(".number_hidden").text($(".container span").length)
});
$(".add").click(function() {
  $(".container").find('span').show();
});

<style>
.container span {display: inline-block; margin: 5px; width: 20px; height: 20px; border: 1px solid black;}
.add {display: inline-block; border: none; cursor: pointer;}
.number_hidden {display: inline-block; border: none;}
</style>

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
</div>

Можно так

$('.container').each(function() {
    var n = $(this).children().slice(3).hide();
    $('<button/>', {class: 'add', text: n.length}).insertAfter(n.last()).click(function() {
        n.show()
    })
});

Цитата:

Сообщение от LADYX

Как это можно реализовать?

форум - поиск ...

скрыть после 3 элемента

LADYX,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
.container span:nth-child(3) ~ span{
   display:  none;
}
.container.more span:nth-child(3) ~ span{
   display: inline-block;
}
.container span {display: inline-block; margin: 5px; width: 20px; height: 20px; border: 1px solid black;}
.add {display: inline-block; border: none; cursor: pointer;}
.container.more .add{
   display: none;
}
</style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
$(function() {
$(".container").each(function(i, div){
    var span = $("span:gt(2)", div);
    if (span.length){
    var button = $(`<button class="add"> ... Ещё ${span.length}</button>`)
    div = $(div).on('click', '.add', () => div.addClass('more'))
    button.appendTo(div);
    }
});
});
  </script>

</head>
<body>
<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
</div>

</body>
</html>

рони,

Цитата:

Сообщение от рони

форум - поиск ...

да я всегда прежде чем чего-то сделать, пытаюсь сделать это сам, обязательно пользуюсь поиском. Но когда уже совсем что-то не получается, тогда тогда уже и задаю свой вопрос. Не подумайте, что первым делом мимо поиска бегу за помощью, как это делают некоторые. :)

Спасибо вам)