Question

我对Jquery很新，并且编写了一个包含多个页面的库，我遇到了Jquery选择器的问题。

我正在尝试选择img代码和a代码，这两个代码都有不同的类名，并且属于.portfolio-item类。

我尝试的是

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

这只会在每页上产生4张图片，但我希望在一页上显示8张

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

编辑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

这个

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

Answer 2

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

Answer 3

此：

$(".portfolio-item a img")

将选择位于具有img类的任何元素内的a元素内的portfolio-item个元素。

听起来像您想要选择自己拥有该类的a和img个元素。这将是这样的：

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

或者，描述性地分解（在这种情况下不是实际的选择器）：

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

任何标记，任何类，但是您想要定义它。请特别注意，此选择器中的标记和类之间存在无空格。那是因为带有空格的意味着“第二部分是第一部分的孩子”，而没有空格则意味着“第二部分作为第一部分的修饰语” ”

编辑：或者，也许我误解了。您的意思是a和img标签本身是{em>后代 portfolio-item类的其他元素吗？在这种情况下，它会更像是这样：

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

即，“任何a元素内的所有.portfolio-item元素，以及任何img元素内的所有.portfolio-item元素”。

选择多个类jquery

3 个答案: