How to loop through objects within a div class?
<p>I have been stuck on this problem for a couple of days now, and it's been really frustrating me. I'm writing what I thought should be an easy infinite image swap within a div, then calling that particular div a class so I can use it multiple times on the same page. Here is the code I'm using below:</p>

<p>HTML:</p>



<pre class="lang-html prettyprint-override"><code>&lt;div class="project"&gt;
&lt;div class="project_images"&gt;
  &lt;img src="../images/portfolio/placeholder.jpg" /&gt;
  &lt;img src="../images/portfolio/placeholder2.jpg" /&gt;
  &lt;img src="../images/portfolio/placeholder3.jpg" /&gt;
  &lt;img src="../images/portfolio/placeholder4.jpg" /&gt;
&lt;/div&gt;
&lt;div class="project_buttons"&gt;
  &lt;a href="#" class="prev"&gt;PREV&lt;/a&gt;
  &lt;a href="#" class="next"&gt;NEXT&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="project"&gt;
&lt;div class="project_images"&gt;
  &lt;img src="../images/portfolio/placeholder.jpg" /&gt;
  &lt;img src="../images/portfolio/placeholder2.jpg" /&gt;
  &lt;img src="../images/portfolio/placeholder3.jpg" /&gt;
  &lt;img src="../images/portfolio/placeholder4.jpg" /&gt;
&lt;/div&gt;
&lt;div class="project_buttons"&gt;
  &lt;a href="#" class="prev"&gt;PREV&lt;/a&gt;
  &lt;a href="#" class="next"&gt;NEXT&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And the jQuery:</p>

<pre><code>$(document).ready(function(){
  next = function(){
    var thisFirst = $(this).parents('div').prev('.project_images img:first');
    var thisLast = $(this).parents('div').prev('.project_images img:last');

    thisLast.after(thisFirst);
  }

  prev = function(){
    var thisFirst = $(this).parent('div').prev('.project_images img:first');
    var thisLast = $(this).parent('div').prev('.project_images img:last');

    thisFirst.before(thisLast);
  }

  $('.prev').click(function(){
    prev();
  });

  $('.next').click(function(){
    next();
  });
});
</code></pre>

<p>When clicking the "NEXT" button within the first div class, images will drop into the second div class of the same name ("project_images"). I understand why it is doing this (<code>:first</code> and <code>:last</code> selectors), but I can't figure out a better way to select the objects and/or select only one instance of the "project_images" class.<br>
Any help would be appreciated...</p>
