Append element depending on current slideshow
<p>I'm using this <a href="http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/" rel="nofollow">parallax slider</a>, and within it I have this other <a href="http://responsive-slides.viljamis.com/" rel="nofollow">slider</a>.  The first one browses through a client list and the second browses each client's specific works.</p>

<p>The HTML is as follows:</p>

<pre><code>&lt;div id="da-slider" class="da-slider"&gt;
    &lt;div class="da-slide"&gt;
        &lt;h2&gt;Some title&lt;/h2&gt;
        &lt;p&gt;Some text&lt;/p&gt;
        &lt;a href="#" class="da-link"&gt;Some link&lt;/a&gt;
        &lt;div class="da-img"&gt;
            &lt;ul class="rslides"&gt;
                &lt;li&gt;&lt;img src="img/img01.jpg" alt="image01" /&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="img/img02.jpg" alt="image02" /&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="img/img03.jpg" alt="image03" /&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;nav class="da-arrows"&gt;
        &lt;span class="da-arrows-prev"&gt;&lt;/span&gt;
        &lt;span class="da-arrows-next"&gt;&lt;/span&gt;
    &lt;/nav&gt;
&lt;/div&gt;
</code></pre>

<p>The nested slideshow has a class dynamically added to the current slide (rslides1, rslides2, rslides3, etc.).  It also dynamically adds a set of bullets (with the class .rslides_tabs) to navigate through the slideshow.  Viewing the first slideshow (from the nested one) generates the following HTML:</p>

<pre><code>&lt;div class="da-img"&gt;
    &lt;ul class="rslides rslides1"&gt;
        &lt;li id="rslides1_s0" class="rslides1_on" style="display: block; float: left; position: relative;"&gt;
            &lt;img alt="image01" src="img/img01.jpg"&gt;
        &lt;/li&gt;
        &lt;li id="rslides1_s1" style="display: none;"&gt;
            &lt;img alt="image02" src="img/img02.jpg"&gt;
        &lt;/li&gt;
        &lt;li id="rslides1_s2" style="display: none;"&gt;
            &lt;img alt="image03" src="img/img03.jpg"&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul class="rslides_tabs rslides1_tabs"&gt;
        &lt;li class="rslides_here"&gt;
            &lt;a class="rslides1_s1" href="#"&gt;1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;a class="rslides1_s2" href="#"&gt;2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;a class="rslides1_s3" href="#"&gt;3&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>What I would like is to have this set of bullets (.rslides_tabs) moved to the div.da-slider.  I tried appending it like this:</p>

<pre><code>$('.da-slider').append($('.rslides_tabs'));
</code></pre>

<p>But it adds all sets of bullets from all slideshows, not just the current one.  It's probably easy but I'm not very good with jQuery yet.  I'd appreciate if someone could guide me.</p>

<p>EDIT:</p>

<p>I've changed the code based on other answers around here, though I still can't make it work.  The function is:</p>

<pre><code>$('.rslides').each(function(i,el) {
    var n = i+1;
    $('.da-slider').append($('.rslides' + n + '_tabs'));
});
</code></pre>

<p>Is this the proper way to do it?  If so, how can I correctly insert the variable in the middle of the attribute?</p>
