CODEWITHSUNDEEP
phpjqueryhtmlwordpress
DevJoeri
DevJoeri

Reputation: 61

Select multiple classes jquery

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>

Upvotes: 0

Views: 202

Answers (3)

Neha Suwal
Neha Suwal

Reputation: 371

This 

$('.portfolio-item').children('a, img')

Upvotes: 1

David
David

Reputation: 219016

This:

$(".portfolio-item a img")

Will select img elements which are inside of a elements which are inside of any element with the portfolio-item class.

It sounds like you want to select a and img elements which themselves have that class. Which would be something like this:

$("a.portfolio-item, img.portfolio-item")

Or, to break it down descriptively (not an actual selector in this case):

$("[tag].[class of that tag], [another tag].[class of that tag]")

Any tag, any class, however you want to define it. Specifically note that there is no space between the tag and the class in this selector. That's because with a space it means "the second part as a child of the first part" whereas without a space it means "the second part as a modifier of the first part".

Edit: Or, perhaps I misunderstood. Do you mean that the a and img tags are themselves descendants of some other element of the portfolio-item class? In that case, it would be more like this:

$(".portfolio-item a, .portfolio-item img")

That is, "all a elements which are inside any .portfolio-item element, and all img elements which are inside any .portfolio-item element".

Upvotes: 0

Wowsk
Wowsk

Reputation: 3675

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

Upvotes: 0

Related Questions