Почему грузоподъемное устройство не загружается и показывает определенное количество детей?

Question

Я пытался создать кнопку loadmore.он не загружает определенное количество детей.Помоги мне, просто скажи мне проблему.

<div id="father">
      <div id="kid" style="display: none;" > I love you</div>
</div>
<div id="father">
      <div id="kid" style="display: none;" > I love you</div>
</div>
<div id="father">
      <div id="kid" style="display: none;" > I love you</div>
</div>
<div id="father">
      <div id="kid" style="display: none;" > I love you</div>
</div>
<div id="father">
      <div id="kid" style="display: none;" > I love you</div>
</div>
<div id="father">
      <div id="kid" style="display: none;" > I love you</div>
</div>
<div id="father">
      <div id="kid" style="display: none;" > I love you</div>
</div>
<div id="loadMore" style="">
      <a href="#">Loadmore</a>
</div>

<script>
    $( document ).ready(function () {
        $("#kid").slice(0, 3).show();
        if ($("#father").length != 0) {
            $("#loadMore").show();
        }     

        $("#loadMore").on('click', function (e) {
            e.preventDefault();
            $("#kid").slice(0, 6).slideDown();
            if ($("#kid").length == 0) {
                $("#loadMore").fadeOut('slow');
            }
        });
    });
</script>

Answer 1

Вы должны использовать здесь класс, так как идентификаторы должны быть уникальными.

Кроме того, проще различать показанные и скрытые предметы с помощью классов.

<div class="father">
      <div class="kid not-shown" style="display: none;" > I love you</div>
</div>
<div class="father">
      <div class="kid not-shown" style="display: none;" > I love you</div>
</div>
<div class="father">
      <div class="kid not-shown" style="display: none;" > I love you</div>
</div>
<div class="father">
      <div class="kid not-shown" style="display: none;" > I love you</div>
</div>
<div class="father">
      <div class="kid not-shown" style="display: none;" > I love you</div>
</div>
<div class="father">
      <div class="kid not-shown" style="display: none;" > I love you</div>
</div>
<div class="father">
      <div class="kid not-shown" style="display: none;" > I love you</div>
</div>
<div id="loadMore" style="">
      <a href="#">Loadmore</a>
</div>

<script>
    $( document ).ready(function () {
        $(".kid.not-shown").slice(0, 3).show().removeClass('not-shown').addClass('shown');

        if ($(".kid.not-shown").length != 0) {
            $("#loadMore").show();
        }

        $("#loadMore").on('click', function (e) {
            e.preventDefault();
            $(".kid.not-shown").slice(0, 3).slideDown().removeClass('not-shown').addClass('shown');
            if ($(".kid.not-shown").length == 0) {
                $("#loadMore").fadeOut('slow');
            }
        });
    });
</script>