next instance of

Question

hello!

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

Answer 1

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.

Answer 2

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