Question

I have a div called ‘div.cloneFrame’, and i am cloning that using jquery.clone. it works fine and i clone all i need, using this function :

var needToClone = 4;
    var totalImgs = 0;
    for(i=0;i<needToClone;i++){
        $('div.cloneFrame').clone()
        .removeClass('cloneFrame')
        .appendTo('.frame-group').each(function(){
            var imgSrcLength = $(this).find('img');
            for(j=0;j<imgSrcLength.length;j++){
                totalImgs++;
                $(imgSrcLength[j]).attr('src','imgs/outfits/'+totalImgs+'.jpg');
            }
        })
    }
    $('div.cloneFrame').remove();

later i need to select the cloned div, for that i am using the nth child function

$('div.myframe:nth-child('+1+')').addClass('incoming').next().addClass('outgoing');

But not work. in case if i use this :

$('div.myframe:nth-child('+3+')').addClass('incoming').next().addClass('outgoing');

it’s working well. why it need skiping 2 numbers on nth-child? anything wrong from my side?

my HTML :

<div class="frame-group">

            <div class="cloneFrame myframe">
                <div id="orange-frame" class="product-frame">
                    <a class="purchase-btn" href="#">Purchase this item</a>
                    <img alt="women coat" src="imgs/yellow-coat.jpg">
                </div>
                <div id="yellow-frame" class="product-frame">
                    <a class="purchase-btn" href="#">Purchase this item</a>
                    <img alt="blue coat" src="imgs/coat-blue.jpg">
                </div>
                <div id="brown-frame" class="product-frame">
                    <a class="purchase-btn" href="#">Purchase this item</a>
                    <img alt="women shoe" src="imgs/women-shoe.jpg">
                </div>
                <div id="green-frame" class="product-frame">
                    <a class="purchase-btn" href="#">Purchase this item</a>
                    <img alt="women jean" src="imgs/jean.jpg">
                </div>
            </div>


            <span class="outfit-no">outfit no.<span>01</span></span>
            <a class="buy-outfit" href="#">Buy outfit</a>
        </div>

visit : http://jsbin.com/iquxaq/3

Answer 1

From Jquery :nth-child() selector:

With :nth-child(n), all children are counted, regardless of what they
are, and the specified element is selected only if it matches the
selector attached to the pseudo-class. With :eq(n) only the selector
attached to the pseudo-class is counted, not limited to children of
any other element, and the (n+1)th one (n is 0-based) is selected.

Solution

Regardless to my tests,

• $('div.myframe:nth-child(1)') tries to look if div.myframe has a first child and if this element has class=”myframe”. In that case it is <span class="outfit-no">outfit no.<span>01</span></span> so nothing is grabbed.

• After that for $('div.myframe:nth-child(2)') tries to grab the second child but it’s still not a .myframe, it is <a class="buy-outfit" href="#">Buy outfit</a> so nothing is stored.

• Now $('div.myframe:nth-child(3)') tries to grab the third child and it’s a .myframe since it’s <div class="myframe"> so it stores it.

Alternative

In your case jquery eq() selector is more appropriate, it works great:

// select the first child    
$('div.myframe').eq(0);
// instead of
// $('div.myframe:nth-child(1)')

With :eq(n) only the selector attached to the pseudo-class is counted,
not limited to children of any other element