Question

尝试获取列表中的下一个匹配元素;

var newScrollX = $('#projectImages li').next(".instOf"+myNo);

上述工作，但我不希望它回到列表中的早期实例;

var newScrollX = $('#projectImages li').next(".instOf"+myNo+":gt("+cIm+")");

但这不起作用。有任何想法吗？

列表是这样的;

<li id="im1" class="projIm instOf1" style="opacity: 1; left: 202px;"></li>
<li id="im2" class="projIm instOf2" style="opacity: 1; left: 1413px;"></li>
<li id="im3" class="projIm instOf3" style="opacity: 1; left: 2624px;"></li>
<li id="im4" class="projIm instOf1" style="opacity: 1; left: 3620px;"></li>
<li id="im5" class="projIm instOf2" style="opacity: 1; left: 4831px;"></li>
<li id="im6" class="projIm instOf3" style="opacity: 1; left: 6042px;"></li>
<li id="im7" class="projIm instOf1" style="opacity: 1; left: 7038px;"></li>
<li id="im8" class="projIm instOf2" style="opacity: 1; left: 8249px;"></li>
<li id="im9" class="projIm **instOf3**" style="opacity: 1; left: 9460px;"></li>
<li id="im10" class="projIm instOf1" style="opacity: 1; left: 10456px;"></li>
<li id="im11" class="projIm instOf2" style="opacity: 1; left: 11667px;"></li>
<li id="im12" class="projIm instOf3" style="opacity: 1; left: 12878px;"></li>

所以，如果您使用的是＃im7，并且您想要 instOf3 的下一个实例，那么它应该转到＃im9而不是它现在有时会返回它。

所以我在想如果我添加一个gt（7）它只会前进但我会收到错误...

非常感谢！ d。

Answer 1

看起来您可能希望通过索引引用列表元素......虽然问题不是很容易理解。

查看:eq和index()

我感觉有些数学，这些坏男孩可能会把你带到你需要去的地方。

Answer 2

试试这个......我还在this pastebin发布了一个演示。

var newScrollX = $(this).nextAll(".instOf"+myNo+":first");

假设$(this)是当前选定的对象。

更新

请原谅我获取自由并清理你的代码，我的强迫症迫使我去做！以下是一些注意事项：

我链接了多个功能，并根据需要使用.end()（link）。
无需在代码中使用eval()。
我替换了代码的.prevAll().length部分，因为ID包含当前长度。
```
.substring(2,newScrollX.length); // im4 -> 4
```
我将滚动更新合并到一个链接和图像点击使用的功能中。
我删除了所有评论并且未使用过变量。对不起，如果我删除你正在做的其他事情。
修改了当前图像显示。我使用当前ID和modulus operator来计算图像编号 - 编码较少：P
```
cImDis = ((cIm-1) % totIm) + 1;
```

脚本

    var edge, marginLeft;
    var cIm = 1; // make this global

$(document).ready(function(){
    edge = $("#navDiv").offset();
    marginLeft = edge.left;
    $('#projectImages')
        .css("background-position",marginLeft+"px 10px")
        .children("li").each(function(i){
            $(this).css('opacity', 0.0);
        })

    $("div.personInfo")
        .children(".toShow").hide().end()
        .each(function(i){
            $(this).click(function(){
                var tgt = $("#xxx"+(i+1));
                if($("#xxx"+(i+1)).is(":visible")){
                    $("#xxx"+(i+1)).slideUp(150);
                } else {
                    $("#xxx"+(i+1)).slideDown(200);
                }
            });
        });
})

$(window).resize(function(){
    edge = $("#navDiv").offset();
    marginLeft = edge.left;
})

$(window).load(function(){
    cIm =1;
    var cImDis =1;
    var totIm = parseInt($("#totIm").text(),10);
    var totX = 0;
    edge = $("#navDiv").offset();
    marginLeft = edge.left;
    var imageIcons="";

    $('#projectImages')
        .css("background-position","-1000px 20px")
        .children("li:eq(0)").animate({ 
            opacity: 1.0
        }, 400 ).end()
        .children("li").each(function(i){

            if(i>0){
                totX = 0;
                $(this).parent("ul").children("li:lt("+i+")").each(function(){
                    totX += $(this).width();
                });
                $(this).css("left",(totX+marginLeft)+"px");
                totX += $(this).width();
                $(this).animate({
                    opacity: 1.0
                }, 400 );
            } else {
                $(this).css("left",marginLeft+"px");
            }
            imageIcons +="<a class=\"scrollTo\" href=\"#\" rel='im"+(i+1)+"'> • </a>";
        });

        $("#imageIcons").html(imageIcons);
        $("#imageIcons a:eq(0)").addClass("activeImage");
        $("h3.phil:eq(0)").children('a').addClass("activeText");

        $("a.scrollToText").click(function(){
            cImDis = $(this).attr("rel");
            var newScrollX = $('#im'+cIm).nextAll(".instOf" + cImDis + ":first").attr('id');
            cIm = parseInt(newScrollX.substring(2,newScrollX.length),10);
            nextIm();
            return false;
        })

        $("#projectImages li img").click(function(){
            cIm++;
            cImDis = ((cIm-1) % totIm) + 1; // find remainder
            nextIm();
            return false;
        })

        function nextIm(){
            var newScrollX = $("#im"+cIm);
            var posX = parseInt(newScrollX.css("left"),10);
            $('#projectImages').scrollTo((posX-marginLeft)+"px", 350, updateDisplay());
            $("#feedback").prepend("<li>(cim:"+cIm+") (cimDis:"+cImDis+")</li>");
        }

        function updateDisplay(){
            $("#cIm").text(cImDis);
            $(".activeText").each(function(){
                $(this).removeClass("activeText");
            });
            $("h3.phil:eq("+(cImDis-1)+")").children('a').addClass("activeText");
        }
});

下一个实例

2 个答案: