Question

我有一个名为'div.cloneFrame'的div，我正在使用jquery.clone克隆它。它运行正常，我克隆了我需要的所有东西，使用这个函数：

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();

稍后我需要选择克隆的div，因为我正在使用第n个子函数

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

但不行。如果我使用这个：

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

它运作良好。为什么它需要在nth-child上滑动2个数字？我这边有什么问题吗？

我的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>

访问：http://jsbin.com/iquxaq/3

Answer 1

来自Jquery :nth-child()选择器：

随着：n-child（n），所有孩子都被计算在内，无论他们是什么是和只有匹配时才选择指定的元素选择器附加到伪类。使用：eq（n）仅选择器附属于伪类计算，不限于儿童选择任何其他元素，并选择第（n + 1）个（n为0）。

<强>解决方案

无论我的测试如何，

$('div.myframe:nth-child(1)')尝试查看div.myframe是否有第一个子节点以及此元素是否具有 class =“myframe”。在这种情况下它是<span class="outfit-no">outfit no.<span>01</span></span>所以没有抓住任何东西。
之后，$('div.myframe:nth-child(2)')尝试抓住第二个孩子，但它仍然不是 .myframe ，它是<a class="buy-outfit" href="#">Buy outfit</a>，因此不存储任何内容。
现在$('div.myframe:nth-child(3)')尝试抓住第三个孩子并且它是 .myframe ，因为它是<div class="myframe">所以它会存储它。

<强>替代

在您的情况下，jquery eq()选择器更合适，效果很好：

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

使用：eq（n）只计算附加到伪类的选择器，不限于任何其他元素的孩子

Jquery克隆子计数问题（nth-child）

1 个答案: