Question

<div id = "listwrapper">
    <ul id = "mylist">                                   
    <?php
        $images = glob("sorted/2017/*.jpg");
        $i = 0;
        foreach((array_reverse($images)) as $image){    
            if ($i == 0){
                    echo "<li>";
            }   
            $i++;                   
            echo'<img id="BR" src="'.$image.'">;

            if($i==4){

                echo"</li>";
                $i = 0;
            }
        }
    ?>
    </ul>
<div>

上述脚本工作正常并输出<li>标记，每个标记包含4个图像。共有约80张图片。

现在，我在点击图片时尝试使用next()和closest()来显示<img>标记中的下一个<li>。或者如果它是<img>中的最后一个<li>，那么请跳到下一个<li>？似乎更容易更改脚本并将每个图像放在自己的<li>标记中。

    $('#mylist li img').click(function(){
        var el = document.getElementById('BR');
        var big = document.getElementById('BRBIG');
        var img = document.getElementById('mylist li img');
        imageClicked = $(this).closest('li');

        big.src = imageClicked.find('img').next().next().attr('src');

        $('#brbigcon').show('fadein');
        $('#BRBIG').show(300);
        $('#fs').show(300);


});

是否有某种方法可以实施closest('img')而不是closest ('li')？

Answer 1

试试这个：

SELECT * FROM (SELECT * FROM interim_19 WHERE idBase IN (1551 , 42286 )) 
temp1 
inner join 
(SELECT * FROM interim_19 WHERE idBase IN (1535 , 5406 )) temp2 
on temp1.Abonent = temp2.Abonent

Jquery的：

<div id = "listwrapper">
<ul id = "mylist">                                   
<?php
    $images = glob("sorted/2017/*.jpg");
    $i = 0;
    foreach((array_reverse($images)) as $image){    
        if ($i == 0){
                echo "<li>";
        }   
        $i++;                   
        echo '<img class="BR" src="'.$image.'">';

        if($i==4){

            echo "</li>";
            $i = 0;
        }
    }
?>
 </ul>
<div>

Answer 2

一条建议。在你的html中，如果图像数量不是4的倍数，那么最后一个li永远不会被关闭。在这里你有另一种解决方法......

<div id = "listwrapper">
    <ul id = "mylist">                                   
    <?php
        // Get the array of image urls.
        $images = array_reverse(glob("sorted/2017/*.jpg"));

        // Create the html `img` element of each image.
        $imgs = array_map(function($v) { return "<img class=\"BR\" src=\"".$v."\">"; },$images);

        // Chumk the array in groups of 4 and put each group inside of a `li` element.
        $imgsli = array_map(function($v) { return "<li>".implode("",$v)."</li>"; },array_chunk($imgs,4));

        // Print all the `li` elements.
        echo implode("",$imgsli);
    ?>
    </ul>
<div>

关于jquery，这将是我的方法......

$('#mylist li img').click(function() {

    var $nextImg;

    if ($(this).next('img').length > 0) { // There's more img in current li, get the next one.
        $nextImg = $(this).next('img');
    }
    else {
        if ($(this).closest('li').next('li').length > 0) // There's more li's, go to the first image of the next one.
            $nextImg = $(this).closest('li').next('li').find('img:first');
        else // We are in the last div, go to the first image.
            $nextImg = $('ul#mylist li:first img:first');
    }

    // Now $nextImg is the jQuery object of the right next image. Do what you need to show it.
    ...
});

根据您的指示，您可以获得正确的下一张图像。只需添加您想要显示图像的代码等。

我希望它有所帮助

JQUERY next（）img in li？ li中的多个imgs

2 个答案: