how to connect 2 UL lists with jQuery traversal.

I am trying to implement some next/previous navigation across a list I have had to break into 2 lists due to the page design. I can easily do this in a single list with jQuery, but cannot figure out how to jump to the first item in the second list from the last item in the first list (and vice versa). Code is here: htt开发者_Go百科p://pastebin.com/5DjtzGBa

You want (as an alternate, if your first search in the current list returns no results):

nextItem = $(this)
    .closest("div") // find the closest div ancestor
    .next("div")    // then its next sibling div
    .find("ul li a")// then the first link in the list
    .attr("id");

Fully functional example here.

You can check if this is the last li, and then jump to next list. Similarl logic for jump to prev:

Pseudo code (I'll try to post a working function later)

$("#nav ul li a").bind("click keypress",function(e){
    var dTitle=$(this).text();
    var dContentkey=$(this).attr("id");
                if($(this).parent().is(":last")) {
                     // get next ul item
                }
                else {
         nextItem=$(this).parent().next("li").find("a").attr("id");
                }
    testItem=$(this).parent("#nav").next("div ul li").find("a").attr("id");
    e.preventDefault();
    $("#currTitle").text("Clicked item: "+dTitle);
    $("#nextObjID").text("Next Item: "+nextItem);
    $("#testObjID").text("Test Item: "+testItem);
});

First, if you're IDs are going to be numbered, like in your example, simply use the ID attributes to find the next or previous items.

Second, here is a more general solution. This will work for your case, but it'll also work if you have LIs, divs or whatever scattered all across the page in random locations, and you want to chain all the individual elements together so you can traverse forward and backward through them.

• Step 1: Select all the elements you want. e.g. for you $("#nav li")
• Step 2: Iterate through all elements and store its index number as a data value.
• Step 3: When you click on a chosen element, retrieve it's stored data number, and then retrieve the element from the index position one less or greater than the item clicked on to get the previous or next element (don't forget about looping the ends). You can simply use the selection from Step 1 and .eq(). In your case.

Working example (click on an LI to see which one's next)

$(function() {
    // You can link lists anywhere on the page,
    // not just consecutive ones
    // create an object of all lis and store the index

    // Let's cache our big combine list
    $bigList = $("ul.big-list li");

    // Store the index value in the list item
    $bigList.each(function(index) {
        $(this).data("indexNum", index);
    });

    // Retrieve stored index value and add or subtract one
    $bigList.click(function() {
        // Add one to find next
        // Subtract one to find prev
        var nextIndex = $(this).data("indexNum") + 1;

        // Wrap from last to first
        if (nextIndex === $bigList.length)
            nextIndex = 0;

        // Find next or prev using .eq()
        $bigList.eq(nextIndex).animate(
                    {"font-size":"200%"},500).animate(     
                    {"font-size":"100%"},500);   
    });
});