Блог

Главная - Вопросы по программированию - как отобразить на 2 элемента все данные со многими разными разделами, используя jquery?

как отобразить на 2 элемента все данные со многими разными разделами, используя jquery?

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я хочу отобразить по 3 элемента на каждый раздел, со многими разделами, отличными от действия «Загрузить больше». мой код, как показано ниже:

 <div class="wadah" id="list_1">
    <a href="" class="wadah__item" id="list_item_1_1">
        aaa
    </a>

    <a href="" class="wadah__item" id="list_item_1_2">
        bbb
    </a>
    <a href="" class="wadah__item" id="list_item_1_3">
        ccc
    </a>
    <a href="" class="wadah__item" id="list_item_1_4">
        ddd
    </a>
    <a href="" class="wadah__item" id="list_item_1_5">
        eee
    </a>
    <a href="" class="wadah__item" id="list_item_1_6">
        fff
    </a>
    <div id="loadMore" class="LoadMore">Load more 1</div>
</div>

<div class="wadah" id="list_2">
    <a href="" class="wadah__item" id="list_item_2_1">
        2_a
    </a>

    <a href="" class="wadah__item" id="list_item_2_2">
        2_b
    </a>
    <a href="" class="wadah__item" id="list_item_2_3">
        2_c
    </a>
    <a href="" class="wadah__item" id="list_item_2_4">
        2_d
    </a>
    <a href="" class="wadah__item" id="list_item_2_5">
        2_e
    </a>
    <a href="" class="wadah__item" id="list_item_2_6">
        2_f
    </a>

    <div id="loadMore" class="LoadMore">Load more 2</div>
</div>

javascipt код:

 $(function () {
  $(".wadah__item").slice(0, 2).slideDown().css('display', 'flex');
  $(".LoadMore").on('click', function (e) {
      e.preventDefault();

      $(".wadah__item:hidden").slice(0, 2).slideDown().css('display', 'flex');

      if ($(".wadah__item:hidden").length == 0) {
          $(".LoadMore").fadeOut('slow');
      }

      $('html,body').animate({
          scrollTop: $(this).offset().top
      }, 2000);
  });
});

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

Демонстрационная ссылка:https://jsfiddle.net/mrcrabs/5g9uao73/13

Ответ №1:

Вам нужно отфильтровать wadah__item элементы на основе выбранного элемента. Итак, получите родительский элемент выбранного элемента и найдите скрытые элементы внутри него. Чтобы получить первого 2 дочернего элемента, вы можете использовать :nth-child() селектор псевдокласса с формулой -n 2 (выбирает 2-го и 1-го дочерних элементов).

 $(function() {
  $(".wadah .wadah__item:nth-child(-n   2)").slideDown().css('display', 'flex');
  $(".LoadMore").on('click', function(e) {
    e.preventDefault();

    $(this).parent().find(".wadah__item:hidden").slice(0, 2).slideDown().css('display', 'flex');

    if ($(this).parent().find(".wadah__item:hidden").length == 0) {
      $(this).fadeOut('slow');
    }

    $('html,body').animate({
      scrollTop: $(this).offset().top
    }, 2000);
  });
});
  

 $(function() {

  $(".wadah .wadah__item:nth-child(-n   2)").slideDown().css('display', 'flex');
  $(".LoadMore").on('click', function(e) {
    e.preventDefault();

    $(this).parent().find(".wadah__item:hidden").slice(0, 2).slideDown().css('display', 'flex');

    if ($(this).parent().find(".wadah__item:hidden").length == 0) {
      $(this).fadeOut('slow');
    }

    $('html,body').animate({
      scrollTop: $(this).offset().top
    }, 2000);
  });
});  
 .wadah {
  margin: 30px 0;
}

.wadah__item {
  border: 1px solid #ddd;
  border-top: none;
  padding: 1rem;
}

.wadah__item {
  display: none;
}

#loadMore {
  color: green;
  cursor: pointer;
}

#loadMore:hover {
  color: black;
}

#showLess {
  color: red;
  cursor: pointer;
  display: none;
}

#showLess:hover {
  color: black;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div class="wadah" id="list_1">
    <a href="" class="wadah__item" id="list_item_1_1">
				aaa
			</a>

    <a href="" class="wadah__item" id="list_item_1_2">
				bbb
			</a>
    <a href="" class="wadah__item" id="list_item_1_3">
				ccc
			</a>
    <a href="" class="wadah__item" id="list_item_1_4">
				ddd
			</a>
    <a href="" class="wadah__item" id="list_item_1_5">
				eee
			</a>
    <a href="" class="wadah__item" id="list_item_1_6">
				fff
			</a>
    <div id="loadMore" class="LoadMore">Load more 1</div>
  </div>

  <div class="wadah" id="list_2">
    <a href="" class="wadah__item" id="list_item_2_1">
				2_a
			</a>

    <a href="" class="wadah__item" id="list_item_2_2">
				2_b
			</a>
    <a href="" class="wadah__item" id="list_item_2_3">
				2_c
			</a>
    <a href="" class="wadah__item" id="list_item_2_4">
				2_d
			</a>
    <a href="" class="wadah__item" id="list_item_2_5">
				2_e
			</a>
    <a href="" class="wadah__item" id="list_item_2_6">
				2_f
			</a>

    <div id="loadMore" class="LoadMore">Load more 2</div>
  </div>


</body>

</html>

ОБНОВЛЕНИЕ : Вы даже можете отобразить первые 2 элемента, используя CSS вместо кода jQuery.

 .wadah .wadah__item:nth-child(-n   2){
   display : flex;
}
  

 $(function() {


  $(".LoadMore").on('click', function(e) {
    e.preventDefault();

    $(this).parent().find(".wadah__item:hidden").slice(0, 2).slideDown().css('display', 'flex');

    if ($(this).parent().find(".wadah__item:hidden").length == 0) {
      $(this).fadeOut('slow');
    }

    $('html,body').animate({
      scrollTop: $(this).offset().top
    }, 2000);
  });
});  
 .wadah {
  margin: 30px 0;
}

.wadah__item {
  border: 1px solid #ddd;
  border-top: none;
  padding: 1rem;
}

.wadah__item {
  display: none;
}

#loadMore {
  color: green;
  cursor: pointer;
}

#loadMore:hover {
  color: black;
}

#showLess {
  color: red;
  cursor: pointer;
  display: none;
}

#showLess:hover {
  color: black;
}

.wadah .wadah__item:nth-child(-n   2) {
  display: flex;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div class="wadah" id="list_1">
    <a href="" class="wadah__item" id="list_item_1_1">
				aaa
			</a>

    <a href="" class="wadah__item" id="list_item_1_2">
				bbb
			</a>
    <a href="" class="wadah__item" id="list_item_1_3">
				ccc
			</a>
    <a href="" class="wadah__item" id="list_item_1_4">
				ddd
			</a>
    <a href="" class="wadah__item" id="list_item_1_5">
				eee
			</a>
    <a href="" class="wadah__item" id="list_item_1_6">
				fff
			</a>
    <div id="loadMore" class="LoadMore">Load more 1</div>
  </div>

  <div class="wadah" id="list_2">
    <a href="" class="wadah__item" id="list_item_2_1">
				2_a
			</a>

    <a href="" class="wadah__item" id="list_item_2_2">
				2_b
			</a>
    <a href="" class="wadah__item" id="list_item_2_3">
				2_c
			</a>
    <a href="" class="wadah__item" id="list_item_2_4">
				2_d
			</a>
    <a href="" class="wadah__item" id="list_item_2_5">
				2_e
			</a>
    <a href="" class="wadah__item" id="list_item_2_6">
				2_f
			</a>

    <div id="loadMore" class="LoadMore">Load more 2</div>
  </div>


</body>

</html>

Ответ №2:

Вы можете использовать siblings() и выбирать только из братьев и сестер нажатия кнопки

 $(function () {
        $(".wadah__item").slice(0, 2).slideDown().css('display', 'flex');
        $(".LoadMore").on('click', function (e) {
            e.preventDefault();
          let sibs = $(this).siblings(".wadah__item:hidden");
            sibs.slice(0, 2).slideDown().css('display', 'flex');

            if (sibs.length == 0) {
                $(this).fadeOut('slow');
            }

            $('html,body').animate({
                scrollTop: $(this).offset().top
            }, 2000);
        });
    });