jQuery - 追加一个元素的具体次数？

可以这么说，在这个的情况下，我有4个名为“.CountThese”的div，我想这样做，获取具有该特定类的元素的数量，然后附加一个div的次数为“ .CountThese”（在4次此情况）jQuery - 追加一个元素的具体次数？

这是HTML：

<div class="CountThese"></div> 
<div class="CountThese"></div> 
<div class="CountThese"></div> 
<div class="CountThese"></div> 

<div class="appendHere"></div>

这将是结果：

<div class="CountThese"></div> 
<div class="CountThese"></div> 
<div class="CountThese"></div> 
<div class="CountThese"></div> 

<div class="appendHere"> 
    <div class="appendedDIVs"></div> 
    <div class="appendedDIVs"></div> 
    <div class="appendedDIVs"></div> 
    <div class="appendedDIVs"></div> 
</div>

我只是到目前为止，我发现，你可以指望的内容是这样的数字：

function divcount() { 
    var Count = $('.CountThese').length(); 
    document.write(Count) 
}

以为我不一定知道如何使用..我严重不知道我怎么可能再使用号码附加div或其他任何事情..

这是如何实现的？

来源

2011-06-11 Joonas

您可以遍历.CountThese的div并为每一个，追加到.appendHere

$('.CountThese').each(function(){ 
    $('.appendHere').append('<div class="appendedDivs"></div>'); 
});

来源

2011-06-11 02:26:51

这似乎是太简单了..谢谢。 – Joonas 2011-06-11 02:32:28

“jQuery：这几乎太简单了。” – 2011-06-11 02:41:27

$('.CountThese').each(function() { 
    $('div.appendHere').append('<div class="appendedDIVs"></div>'); 
});

来源

2011-06-11 02:27:37

做这将是遍历每个.CountThese的div像唐和克里斯托弗的最佳方式提及。如果你想要做你的方式，不过，你可以做这样的：

$(".appendHere").append(new Array(++n).join('<div class="appendedDivs">New!</div>'));

其中n是：

var count = $('.CountThese').size(); 
for (var i=0; i<count; i++){ 
    $('div.appendHere').append('<div class="appendedDIVs"></div>'); 
}

来源

2011-06-11 02:33:15

您可以通过使用阵列join()方法一样避免了人工迭代您要创建的元素数量。

这比接受的答案要好，因为它只操作DOM而不是n次。

var n = $(".CountThese").length; 
 
$(".appendHere").append(new Array(++n).join('<div class="appendedDivs">New!</div>'));

.CountThese { 
 
    display: inline-block; 
 
    width: 46px; 
 
    height: 50px; 
 
    background: royalblue; 
 
} 
 
.appendedDivs { 
 
    display: inline-block; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    padding: 5px; 
 
    margin-right:5px; 
 
    color: gold; 
 
    font-weight: bold; 
 
    background: dodgerblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="CountThese"></div> 
 
<div class="CountThese"></div> 
 
<div class="CountThese"></div> 
 
<div class="CountThese"></div> 
 

 
<div class="appendHere"></div>

来源

2014-11-11 18:14:11

jQuery - 追加一个元素的具体次数？

回答

相关问题