javascript - div の子供のためのドット。jQuery の頭痛の種 - パート 2

Question

したがって、これは私の以前の質問のパート 2 です (この質問に対して新しい質問を開始するように勧められました)。
参考までに、私の以前の投稿: Dots for Children in div. jQuery の頭痛の種

私の質問は次
のとおりです。スタイリングの目的で「アクティブな」クラス/ID を「imgdots」div に追加するにはどうすればよいですか?
例:
画像 4 を使用しているとします。次に、4 番目の「imgdots」div を別の色にしたいとします。

繰り返しますが、どんな助けでも大歓迎です！

EDIT
これまでに持っていたものを含むフィドルを設定しました。最初の画像スライダーは、私が従ったチュートリアルからのもので、そこからすべてをつなぎ合わせたものです。
リンクは次のとおりです: jsfiddle.net/Reinhardt/cgt5M/8/

Answer 1

n番目の子CSSを見たことがありますか？

http://www.w3schools.com/cssref/sel_nth-child.asp

#showContainer:nth-child(4)
{
background:#ff0000;
}

Answer 2

試す

/* The jQuery plugin */
(function ($) {
    $.fn.simpleShow = function (settings) {
        var config = {
            'tranTimer': 5000,
            'tranSpeed': 'normal'
        };
        if (settings) $.extend(config, settings);
        this.each(function () {
            var $wrapper = $(this),
                $ct = $wrapper.find('.showContainer'),
                $views = $ct.children();
            var viewCount = $views.length;

            var $imgdotholder = $('<div class="imgdotholder"></div>').appendTo('.wrapper');
            for (var i = 0; i < viewCount; i++) {
                $('<div class="imgdots"></div>').appendTo($imgdotholder);
            }
            var $imgdots = $imgdotholder.children();

            var timer, current = 0;

            function loop() {
                timer = setInterval(next, config.tranTimer);
            }

            function next(idx) {
                $views.eq(current).hide();

                current = idx == undefined ? current + 1 : idx;
                if (isNaN(current) || current < 0 || current >= viewCount) {
                    current = 0;
                }

                $views.eq(current).fadeIn(config.tranSpeed);
                $imgdots.removeClass('current').eq(current).addClass('current');
            }

            $imgdots.click(function(){
                clearInterval(timer);
                next($(this).index());
            })

            $wrapper.find('.btn_nxt').click(function(){
                clearInterval(timer);
                next();
            });
            $ct.hover(function(){
                clearInterval(timer);
            }, loop);

            $views.slice(1).hide();
            $imgdots.eq(0).addClass('current');
            loop();
        });
        return this;
    };
})(jQuery);

/* Calling The jQuery plugin */
$(document).ready(function () {
    /**/
    $(".wrapper").simpleShow({
        'tranTimer': 3000,
        'tranSpeed': 800
    });
});

デモ:フィドル