选择多个类jquery

Question

I'm pretty new to Jquery and writing a gallery with multiple pages and I have a problem with the Jquery selector.

I'm trying to select a img tag and a a tag, both tags have different class names and are in a .portfolio-item class.

What I've tried is

var countImages = $(".portfolio-item a img").length;
    console.log(countImages);
    var perPage = 8;
    $('.image, .edit-post-link').css('display', 'none');
    //$('.post-edit-link').css('display', 'none');
    //$('.slider').children().slice(0, perPage).css('display', 'block');
    $('.image, .edit-post-link').slice(0, perPage).fadeIn("fast");
    //$('.post-edit-link').slice(0, perPage).fadeIn("fast");
    function goTo(pageNumb){
        var startFrom = pageNumb * perPage;
        var endOn = startFrom + perPage;
        //$('.post-edit-link').fadeOut("fast").delay( 200 ).slice(startFrom, endOn).fadeIn("fast");
        $('.image, .edit-post-link').fadeOut("fast").delay( 200 ).slice(startFrom, endOn).fadeIn("fast");
    }
    var buttons = countImages/perPage;
    console.log(buttons);
    for (var i = 0; i < buttons; i++) {
        var number = i + 1;
        $(".pagination").append("<li><a class='navigation-number'>"+number+"</a></li>");
        //console.log(number);
    };
    $('.navigation-number').on('click', function() {
        var pageNumber  = $(this).text(); 
        goTo(pageNumber -1);
    });

this only results in 4 images on each page, but I wanted 8 on one page

    <?php if (have_posts()): while (have_posts()) : the_post(); ?>


    <div class="portfolio-item">
        <!-- post thumbnail -->
        <?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <?php the_post_thumbnail('medium', array('class' => 'img-responsive image')); // Declare pixel size you need inside the array ?>
            </a>
        <?php endif; ?>
        <!-- /post thumbnail -->
        <div class="edit-post-link">
            <?php edit_post_link(); ?>  
        </div>
    </div>

Edit 3:

<div class="col-md-3 portfolio-item">
    <!-- post thumbnail -->
                <a href="http://www.q-mediaspot.nl/blog/cinema-4d/cinema-4d-vaas/" title="Cinema 4d Vaas" style="display: none;">
            <img src="http://www.q-mediaspot.nl/blog/wp-content/uploads/2016/03/placeholder1-250x150.jpg" class="img-responsive image wp-post-image" alt="placeholder1">            </a>
            <!-- /post thumbnail -->

    <div class="edit-post-link">
        <a class="post-edit-link" href="http://www.mywebsite.nl/blog/wp-admin/post.php?post=4&amp;action=edit">Edit This</a>    
    </div>      

Answer 1

var $els = $("img.className, a.otherClassName");