CODEWITHSUNDEEP
javascriptjqueryhtml
Road Name
Road Name

Reputation: 129

how to display per 2 items of all data with many different divs using jquery?

I want to display 3 items per div, with many divs different from the action click on link load more. my code as below:

<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 code:

$(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);
  });
});

I want every link load more to be clicked, then the item that appears is 2 from each div.

Link Demo: https://jsfiddle.net/mrcrabs/5g9uao73/13/

Upvotes: 2

Views: 191

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115242

You need to filter out wadah__item elements based on the clicked element. So get the parent of the clicked element and get hidden elements within that. To get first 2 child you can use :nth-child() pseudo-class selector with formula -n + 2 ( selects 2nd and 1st child).

$(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>

UPDATE : You can even show first 2 elements by using CSS instead of jQuery code.

.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>

Upvotes: 2

Maheer Ali
Maheer Ali

Reputation: 36584

You can use siblings() and only select from siblings of the button click

$(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);
        });
    });

Upvotes: 0

Related Questions