Selecting a div Class

JavaScript
1

Hello everybody,

I’m using the following html to display images on my website.

<!-- Item No. ( 1 ) -->
				<div class="col-md-4 col-xs-12 lifestyle">
							<figure class="portfolio-item">
								<!-- Portfolio-Item Image -->
								<div class="portfolio-img">
									<img class="img-responsive" src="img/lookbook/patricia.jpg" alt="Patricia | Lifestyle Photography 2018">
								</div>
								<figcaption class="portfolio-caption">
									<div class="text">
										<a href="#"><h4 class="light">LifeStyle</h4></a>
										<p class="light">Model: Patricia <br/>MUA: Anyi </p>
									</div>
								</figcaption>
							</figure>	
						</a>					
					</div>
				
				<!-- Item No. ( 2 ) -->
				<div class="col-md-4 col-xs-12 comfas">
							<figure class="portfolio-item">
								<!-- Portfolio-Item Image -->
								<div class="portfolio-img">
									<img class="img-responsive" src="img/lookbook/Kiemé & Daim-2439-bewerkt.jpg" alt="Kiema & Daim">
								</div>
								<figcaption class="portfolio-caption">
									<div class="text">
										<a href="#"><h4 class="light">Kiemé &amp; Daim </h4></a>
										<p class="light">Model: SuzzyOnTheRoad</p>
									</div>
								</figcaption>
							</figure>	
						</a>					
					</div>

I would like for it to have a “Load More Button” So not all images are loaded as once.

This code is used to call the javascript:

<!-- JQuery JS File -->
		<script src="js/jquery-1.12.1.min.js"></script>
<!-- Custom JS File -->
		<script src="js/scripts.js"></script>

The script only doesn’t work I did something wrong. Can you help me wit this?

/* ---------------------------------------------------
	15 - Load More portfolio 
----------------------------------------------------- */

$(function () {
    $(let divs = document.getElementsByClassName("col-md-4 col-xs-12");).slice(0, 4).show();
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $("div:hidden").slice(0, 4).slideDown();
        if ($("div:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});
 
$('a[href=#top]').click(function () {
    $('body,html').animate({
        scrollTop: 0
    }, 600);
    return false;
});
 
$(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
        $('.totop a').fadeIn();
    } else {
        $('.totop a').fadeOut();
    }
});

I think the problem is in the first line:

$(let divs = document.getElementsByClassName("col-md-4 col-xs-12");).slice(0, 4).show();

Here I want to call the div class…

2

You’re right. Try

$(let divs = document.querySelectorAll(".col-md-4.col-xs-12");).slice(0, 4).show();

As they are classes use the period, and as they are on the same item no spaces.

3

Hi Snow,
Unfortunately doesn’t work

4

This syntax is not correct.

$(let divs = document.getElementsByClassName("col-md-4 col-xs-12");).slice(0, 4).show();

This returns an HTMLCollection, there is no slice() method on it.

document.getElementsByClassName("col-md-4 col-xs-12");

This will give you an array

let divs = Array.from(document.getElementsByClassName("col-md-4 col-xs-12"));

Can you make a Codepen with some more complete code of what you are doing?