javascript - 如何限制一个div可以包含的元素？ HTML

Question

我会尽量做到 super 具体。

我有一个包含图像的 div，我正在使用 jquery(主要是 .appendTo() 函数)移动到另一个 div(称为 select)。但是，我只希望 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>

然后 select 不能容纳更多，如果添加了另一个图像，它会删除第 5 个图像并用第 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');
}