Append element depending on current slideshow
I have a slideshow with the following code:
- <div class="da-img">
- <ul class="rslides rslides1">
- <li id="rslides1_s0" class="rslides1_on" style="display: block; float: left; position: relative;">
- <img alt="image01" src="img/img01.jpg">
- </li>
- <li id="rslides1_s1" style="display: none;">
- <img alt="image02" src="img/img02.jpg">
- </li>
- <li id="rslides1_s2" style="display: none;">
- <img alt="image03" src="img/img03.jpg">
- </li>
- </ul>
- <ul class="rslides_tabs rslides1_tabs">
- <li class="rslides_here"> <a class="rslides1_s1" href="#">1</a>
- </li>
- <li> <a class="rslides1_s2" href="#">2</a>
- </li>
- <li> <a class="rslides1_s3" href="#">3</a>
- </li>
- </ul>
- </div>
Where the classes .rslides1, .rslides2, etc. are added dynamically, as well as the .rslides1_tabs, .rslides2_tabs, etc. (which are the navigation bullets). What I need is to move these bullets to an upper div. The way I tried to do it is:
- $('.rslides').each(function(i,el) {
- var n = i+1;
- $('.da-slider').append($(".rslides"+n+"_tabs"));
- });
But then all the bullets from all the slideshows are displayed (as text, when they should be links), not just for the current one. I'm not very good at jQuery yet, can someone help me figure the correct syntax for this? Or maybe there's a better way to do it than what I have?
I'd appreciate your help.