title: JQuery to find next class in unordered list
body: <p>I am using JQuery/Ajax for some functionality on my site.  Currently I have a left side that displays an unordered list and each list element has a class of something like shop-thumb, Whenever some clicks on a shop-thumb then on the right that content is loaded with Ajax.  </p>
  
  <p>Now I want to incorporate a next/previous button so users can click next (from the right side) and the next list item is loaded with the ajax changing the content on the right.</p>
  
  <p>Here is a really basic version of what I am working with:</p>
  
  <pre><code>&lt;div class="thumbs"&gt;
      &lt;ul class="products"&gt;
          &lt;li class="shop-thumb"&gt;&lt;a href="www.google.com/123"&gt;&lt;img src="www.google.com/image1" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="shop-thumb"&gt;&lt;a href="www.google.com/456"&gt;&lt;img src="www.google.com/image2" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="shop-thumb"&gt;&lt;a href="www.google.com/789"&gt;&lt;img src="www.google.com/image3" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="shop-thumb"&gt;&lt;a href="www.google.com/101112"&gt;&lt;img src="www.google.com/image4" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="shop-thumb"&gt;&lt;a href="www.google.com/131415"&gt;&lt;img src="www.google.com/image5" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="paginate"&gt;
      &lt;div class="prev"&gt;Prev&lt;/div&gt; | &lt;div class="next"&gt;Next&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="main"&gt;
  &lt;!-- Ajax comes in here --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is what I have in my JQuery/Ajax calls -- Everything is working fine except the .next click function:</p>
  
  <pre><code>&lt;script&gt;
  jQuery(document).ready(function($){
      var defaultValue = $("ul.products li.shop-thumb a:first").attr("href");
  
      $(".main").load(defaultValue);
  
    $("ul.products li.shop-thumb a").click(function(e){
        e.preventDefault();
  
        var addressValue = $(this).attr("href");
      $(".main").load(addressValue);
  
    });
  
    $(".next").click(function() {
        $("ul.products").next();
        var newValue = $("ul.products .shop-thumb a").attr("href");
        $(".main").load(newValue);
    });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any help would be appreciated on how I can achieve this next/previous functionality.  Thought I should be using <code>.next()</code>, <code>.find()</code> or <code>.nextAll</code></p>
  
  <p>If you wouldn't mind throwing me a bone and showing me an example so I can see where and what I did wrong.</p>