如何限制div可以包含的元素？ HTML

Question

我會盡力做到這一點。

我有一個div，其中包含使用jquery（主要是.appendTo（）函數）移動到另一個div的圖像（稱爲select）。但是，我只想要選擇最多可以保存5張圖像，如果在5之後添加了任何圖像，則會刪除最後添加的元素。因此，舉例來說，如果我的形象div包含6個元素：

<div id= "images"> 
    <img src="Slices/images/1.png"> 
    <img src="Slices/images/2.png"> 
    <img src="Slices/images/3.png"> 
    <img src="Slices/images/4.png"> 
    <img src="Slices/images/5.png"> 
    <img src="Slices/images/6.png"> 
</div> 

和我移動5使用jQuery選擇：

<div id= "select"> 
    <img src="Slices/images/1.png"> 
    <img src="Slices/images/2.png"> 
    <img src="Slices/images/3.png"> 
    <img src="Slices/images/4.png"> 
    <img src="Slices/images/5.png"> 
</div> 

然後選擇可以持有不超過這一點，如果另一圖像添加它消除了第五圖像，並與第6個替代它：

<div id= "select"> 
    <img src="Slices/images/1.png"> 
    <img src="Slices/images/2.png"> 
    <img src="Slices/images/3.png"> 
    <img src="Slices/images/4.png"> 
    <img src="Slices/images/6.png"> 
</div> 

這一直困擾着我，而我似乎不能在任何地方找到答案。我檢查了jquery方法，但似乎沒有限制div可容納多少元素。也許這必須用html/javascript完成？我後來要將這些文件導出到一個文件中，所以它們不大於5是很重要的。它與這個非常相似：http://jsfiddle.net/8VrdE/109/我從另一個問題（How to move an element into another element?）中獲得。儘管爲了簡單，我略微編輯了代碼。

編輯：我的代碼根本沒有限制...我真的不知道如何。我可以發佈處理選擇的腳本。圖像div與我發佈的非常相似。

<script> 
$.fn.animateTo = function(appendTo, destination, duration, easing, complete) { 
if(appendTo !== 'appendTo'  && 
appendTo !== 'prependTo' && 
appendTo !== 'insertBefore' && 
appendTo !== 'insertAfter') return this; 
var target = this.clone(true).css('visibility','hidden')[appendTo](destination); 
this.css({ 
'position' : 'relative', 
'top'  : '0px', 
'left'  : '0px' 
}).animate({ 
'top' : (target.offset().top - this.offset().top)+'px', 
'left' : (target.offset().left - this.offset().left)+'px' 
    }, duration, easing, function() { 
target.replaceWith($(this)); 
$(this).css({ 
    'position' : 'static', 
    'top'  : '', 
    'left'  : '' 
}); 
if($.isFunction(complete)) complete.call(this); 
}); 
} 
$(document).ready(function() 
{ 
    $("#images").find("img").click(function() 
    { 
      if ($(this).parent().attr("id") =="images") 
      { 
       $(this).animateTo('appendTo', '#select'); 
       i++; 
      } 
      else 
      { 
       $(this).animateTo('prependTo', '#images'); 
      }  
    }); 
}); 
</script> 

Answer 1

您需要先查看目標中已有多少個子元素，然後根據需要殺掉多餘的子元素。

使用你引用了樣品（3集的限制）：http://jsfiddle.net/TrueBlueAussie/8VrdE/110/

function moveButton(elem){ 
    var $selected = $('#selected'); 
    var $kids = $selected.children(); 
    if ($kids.length >= 3) 
    { 
     $kids.last().remove(); 
    } 
    $(elem).detach().appendTo('#selected'); 
}