[英]HTML/jQuery Limit no. of divs in container
(首先我建議查看相關圖像)我有3個具有相同類.container的容器。 此外,用戶可以將子div動態添加到容器中。 用戶將通過單擊每個“ .parent”內的“ .add” div開始添加div(即.parent)。 容器最大可容納3格。 如果用戶已經添加了3個div,則下一個div應該進入第二個容器,依此類推。 最后一個容器(第三個容器)裝滿后,將彈出警報,提示“您無法再添加div”。
我有兩個問題:
使用jquery,如何將每個容器的“ .parent” div數量限制為3。如果用戶嘗試添加另一個容器,則將其添加到容器2(除非容器2具有3個子div,否則它將進入容器3)?
一旦第3頁的容器已滿(3格),便會彈出警告,提示“您無法再添加div”。
我只有的一小段代碼無法正常工作。 請幫助我的代碼。 我在所有這些方面都是新手。
提前致謝。
相關圖像:[1]: http : //i.stack.imgur.com/zi78d.png
樣例代碼:
<html>// the containers
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>//divs that are supposed to be appended
<div class="parent">
<div class="add"></div>
</div>
<div class="parent">
<div class="add"></div>
</div>
<div class="parent">
<div class="add"></div>
</div>
<div class="parent">
<div class="add"></div>
</div>. . .
</html>
。
<script>
var $pages = $('.container');
var child = '$('.add ').parent()';
$(".add").on('click', function () {
var childAdded = false;
$pages.each(function () {
var $container = $(this);
if ($container.children().length < 3) {
$container.append.('child');
childAdded = true;
return false;
}
});
if (!childAdded) {
alert("You can not add any more divs");
}
});
</script>
您必須跟蹤自己添加的div數量。 然后,使用此信息來確定應將其放入哪個.container
中。
var added = 0;
...
$(".add").on('click', function () {
var target;
if(added<3) {
target = $pages[0];
} else if (added<6) {
target = $pages[1];
} else if (added<9) {
target = $pages[2];
} else {
alert("You can not add any more divs");
return
}
$(target).append($(this).parent());
added += 1;
您的代碼中的幾個問題
當您單擊按鈕時,您需要parent
類的實例,而不是全部.parent
使用不應該存在的jQuery對象引號引起語法錯誤。
這是使用filter()
方法的一種簡單方法。
$(".add").on('click', function () {
/* filter $pages down to first available one with space */
var $page=$pages.filter(function(){
return $(this).children().length < 3;
}).first();
if( !$page.length ){ /* if no elements returned from filter, they are all full */
alert("You can not add any more divs");
}else{
/* get instance of parent based on button that was clicked which is "this" */
var $parent=$(this).closest('.parent');
$page.append( $parent );
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.