jQuery选择倒数第二个孩子

Question

An interesting thing has happened as I build an light box using Jquery. 当我使用Jquery构建灯箱时，发生了一件有趣的事情。 I've set up left and right arrow buttons to move through the list so that at the last child the right arrow button begins again from the first child or at the first child, the left arrow button moves to the last child. 我已经设置了左右箭头按钮在列表中移动，以便在最后一个孩子处，右箭头按钮再次从第一个孩子或第一个孩子开始，向左箭头按钮移动到最后一个孩子。

What's happening is that my left arrow button is supposed to move from the first child to the last child but instead is skipping over the last child and displaying the photo of the second to last child. 发生的事情是，我的左箭头按钮应该从第一个孩子移到了最后一个孩子，而是跳过了最后一个孩子并显示了倒数第二个孩子的照片。 I'm not having the same problem with the right arrow button moving from the last child to the first. 我没有将右箭头按钮从最后一个孩子移到第一个孩子的相同问题。

Also, when I click the left arrow and console.log the last child, I get the very image that I want to display logged correctly, but the image in the overlay is the second to last image. 另外，当我单击向左箭头并在console.log上记录最后一个孩子时，我会正确记录要显示的图像，但是覆盖层中的图像倒数第二个图像。

<body>
    <h1>Image Gallery</h1>
    <ul id="imageGallery">
        <li>
            <a href="images/refferal_machine.png">
                <img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel">
            </a>
        </li>

        <li><a href="images/space-juice.png"><img src="images/space-juice.png" width="100" alt="Space Juice by Mat Helme"></a></li>
        <li><a href="images/education.png"><img src="images/education.png" width="100" alt="Education by Chris Michel"></a></li>
        <li><a href="images/copy_mcrepeatsalot.png"><img src="images/copy_mcrepeatsalot.png" width="100" alt="Wanted: Copy McRepeatsalot by Chris Michel"></a></li>
        <li><a href="images/sebastian.png"><img src="images/sebastian.png" width="100" alt="Sebastian by Mat Helme"></a></li>
        <li><a href="images/skill-polish.png"><img src="images/skill-polish.png" width="100" alt="Skill Polish by Chris Michel"></a></li>
        <li><a href="images/chuck.png"><img src="images/chuck.png" width="100" alt="Chuck by Mat Helme"></a></li>
        <li><a href="images/library.png"><img src="images/library.png" width="100" alt="Library by Tyson Rosage"></a></li>
        <li><a href="images/boat.png"><img src="images/boat.png" width="100" alt="Boat by Griffin Moore"></a></li>
        <li><a href="images/illustrator_foundations.png"><img src="images/illustrator_foundations.png" width="100" alt="Illustrator Foundations by Matthew Spiel"></a></li>
        <li><a href="images/treehouse_shop.jpg"><img src="images/treehouse_shop.jpg" width="100" alt="Treehouse Shop by Eric Smith"></a></li>
    </ul>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

</body>

The JavaScript: JavaScript：

var $overlay = $('<div id="overlay"></div>');
var $image = $('<img>');
var $caption = $('<p></p>');
var $arrowLeft = $('<button id="left" class="arrow">&lsaquo;</button>');
var $arrowRight = $('<button id="right" class="arrow">&rsaquo;</button>');
var $exit = $('<button id="exit">X</button>');

//Add image to overlay
$overlay.append($image);

//Add buttons to overlay
$overlay.append($arrowRight);
$overlay.append($arrowLeft);
$overlay.append($exit);

//Add caption to overlay
$overlay.append($caption);

//Add overlay
$('body').append($overlay);


//Capture the click event on a link to an image
$('#imageGallery a').click(function(event) {
    event.preventDefault();
    var imageLocation = $(this).attr("href");

    //Update overlay with the image linked in the link
    $image.attr('src', imageLocation);

    //Show the overlay
    $overlay.show();

    //Get child's alt atribute and set caption
    var captionText = $(this).children('img').attr('alt');
    $caption.text(captionText);
});

//When left arrow is clicked
$arrowLeft.click(function() {
    $('#imageGallery li a img').each(function() {
        var galleryImage = $(this);
        if (galleryImage.attr('src') === $image.attr('src')) {
            var li = galleryImage.parent().parent();
            if (li.is(':first-child')) {
                var gallery = li.parent();
                var lastLi = gallery.children(':last-child');
                var anchor = lastLi.children('a');
                var image = anchor.children('img');
                $image.attr('src', image.attr('src'));
                console.log(lastLi);
            } else {
                var prevLi = li.prev();
                var anchor = prevLi.children('a');
                var image = anchor.children('img');
                $image.attr('src', image.attr('src'));
                return false;
            }
        }
    });
});

//When right arrow is clicked
$arrowRight.click(function() {
    $('#imageGallery li a img').each(function() {
        var galleryImage = $(this);
        if (galleryImage.attr('src') === $image.attr('src')) {
            var li = galleryImage.parent().parent();
            if (li.is(':last-child')) {
                var gallery = li.parent();
                var firstLi = gallery.children(':first-child');
                var anchor = firstLi.children('a');
                var image = anchor.children('img');
                $image.attr('src', image.attr('src'));
            } else {
                var nextLi = li.next();
                var anchor = nextLi.children('a');
                var image = anchor.children('img');
                $image.attr('src', image.attr('src'));
                return false;
            }
        }
    });
});

//When x button is clicked
$exit.click(function() {
    //Hide the overlay
    $overlay.hide();
});

Answer 1

Update 1: 更新1：

In the handler, you are running an each loop to test each image element, so make sure return false; 在处理程序中，您正在运行一个each循环来测试每个图像元素，因此请确保return false;否则，请return false; is used when you find the matching image, otherwise your loop runs one more time after a match: 当您找到匹配的图片时使用，否则您的循环将在匹配之后再运行一次：

//When left arrow is clicked
$arrowLeft.click(function() {
    $('#imageGallery li a img').each(function() {
        var galleryImage = $(this);
        if (galleryImage.attr('src') === $image.attr('src')) {
            var li = galleryImage.parent().parent();
            if (li.is(':first-child')) {
              // if code block
              ...
            } else {
               // else code block
               ...
            }
            // move this to here
            return false;
        }
    });
});

Make sure to update the arrow right handler as well. 确保还更新了向右箭头处理程序。

You have an incorrect variable in your click handler: 您的点击处理程序中的变量不正确：

//When left arrow is clicked
$arrowLeft.click(function() {
    if (li.is(':first-child')) {
            var gallery = li.parent();
            var lastLi = gallery.children(':last-child');
            var anchor = lastLi.children('a');
            var image = anchor.children('img');
            $image.attr('src', image.attr('href'));
            console.log(lastLi);
    } else {
   ...
});

Should be: 应该：

$image.attr('src', image.attr('src'));

You should look into joining that logic into one handler function to reduce the amount of code. 您应该考虑将该逻辑合并到一个处理函数中，以减少代码量。

Also you can simplify this: 您也可以简化此操作：

var li = galleryImage.parent().parent();

to this: 对此：

var li = galleryImage.closest('li');

jQuery选择倒数第二个孩子

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-10-05 17:23:16

jQuery选择倒数第二个孩子

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-10-05 17:23:16

解决方案1
0 已采纳 2015-10-05 17:23:16