next instance of

trying to get the next matching element in a list;

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

the above works but i don't want it to go back to earlier instances in the list so;

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

but that doesn't work. Any ideas?

list is like this;

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

so i开发者_C百科f you are on #im7, and you want the next instance of instOf3 it should go to #im9 and not back which it does sometimes now.

So i was thinking if i added a gt(7) it would only go forward but i get an error...

Many thanks! D.

It looks like you might want to refer to list elements by their index... although the question isn't very easy to understand.

Have a look at :eq and index()

I get the feeling some maths and these bad boys might get you where you need to go.

Try this... I also posted a demo in this pastebin.

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

Assuming that $(this) is the currently selected object.

Update:

Please forgive me for taking liberties and cleaning up your code, my OCD compelled me to do it! Here are a few notes:

• I chained multiple functions and used .end() (link) as needed.
• There is no need to use eval() in the code.

• I replaced the .prevAll().length portion of the code, since the ID contains the current length.

  .substring(2,newScrollX.length); // im4 -> 4
  

• I combined the scrolling update into one function that both the links and image click use.

• I removed all comments and unused variables. Sorry if I removed something else you were working on.

• The current image display was modified. I used the current ID and a modulus operator to calculate the image number - it's less coding :P

  cImDis = ((cIm-1) % totIm) + 1;
  

Script

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