Dynamic selectors for external jQuery slider navigation?

Very straightforward question:

I've built a slid开发者_Go百科er with (dynamic amount of slides), with a sidebar for expanded navigation (#slidercontrols). Every child of this navigation sidebar should link to their own corresponding slide.

I'm currently working with a very quick, simple setup which just repeats the same code for each slide and works just fine, but I'm sure we'll all agree that it's a very messy solution. Not very DRY. For educational reasons, I'm curious how you pro's would solve this matter :)

How could you build a simple loop that directs #slidernavigation child X to slide X? You'd need some sort of dynamic selector that I'm unfamiliar with...

Fiddle: http://jsfiddle.net/qbahamutp/TsJCP/

---

Well at first I would suggest that you use just one selector. Then how to recognize the index? There are many ways, but in this case one way could be storing data to div element with jQuery http://api.jquery.com/jQuery.data/

Then when you click any div, you just take the index from the saved data and use that.

If you know that the divs are always in indexed order, you could just use .index() aswell. Example with .index() http://jsfiddle.net/TsJCP/1/

---

I would do this:

http://jsfiddle.net/9Quk7/5/

add attribute rel to the slider control with the number of the slide with $.each() or use some other logic to do it (like generate indexes in the html e.g. get them from a db). You can use it as a selector in jQuery and CSS aswell. e.g. .article[rel="1"]{ color: red !important; }

Generated markup will look like

<div class="article gotoslide-1 currentslide" rel="1">
                <h4>Past NedTrain bij jou?</h4>
                <p>Bekijk met welke functies en .</p>
</div>

and use $(this).attr('rel') in onclick to get the index.

$(function(){
    $('#contentslider ul').anythingSlider({
        width            : 320,
        height            : 215,
        startStopped    : true,
        forwardText        :" ",
        backText        :" ",
        delay            : 6000,
        easing            : 'easeInOutExpo',
//                    buildArrows        : false,
        hasgTags        : false,
//                    appendControlsTo: "#slidercontrols",
        buildNavigation    : false
    });

    $("#slidercontrols .article").each(function(i){
        $(this).attr('rel',i+1);
    });
    // Slide navigation. 
    $("#slidercontrols .article").click(function(){
        $('#contentslider ul').anythingSlider($(this).attr('rel'), function(slider){ /* alert('Now on page ' + slider.currentPage); */ });
        $(".currentslide").removeClass("currentslide");
        $(this).addClass("currentslide");
        return false;
    });
});

You might want to use $("#slidercontrols .article").live('click',...); if you plan to dynamically add slides