如何限制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'); 
}