Форум

LADYX · #1 (**permalink**) 04.06.2020, 15:10

На странице имеются блоки .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>

laimas · #2 (**permalink**) 04.06.2020, 15:23

Можно так

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

рони · #3 (**permalink**) 04.06.2020, 15:47

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

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

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

рони · #4 (**permalink**) 04.06.2020, 17:04

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>

LADYX · #5 (**permalink**) 05.06.2020, 12:54

рони,

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

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

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

Спасибо вам)

Форум

Справочник

Discord чат

Курсы javascript