下一个实例

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
  

• 我将滚动更新合并为一个功能，链接和图像点击都使用。

• 我删除了所有未使用的 cmets 变量。抱歉，如果我删除了 你正在做的其他事情。

• 当前图像显示已修改。我使用当前 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");
        }
});