Question

使用此代码，我可以将列表拆分为最大列限制（8）的列，
它有效，但当我通过文本输入添加新项目时出现问题：

添加了新项目，但列表和新项目存在一些错误..

$(window).load(function(){
    splitColumns();
});

function addFun(value){
    $('.LAST').append('<div class="BB"><span>'+value+'</span><button onclick="$(this.parentElement).remove();">x</button></div>');
    splitColumns();
}


function splitColumns(){
    var itemindex = 0;
    var Jlistobj = null;
    $('.AA .BB').each(function(){
        if (itemindex % 8 == 0){
            Jlistobj = $('<div class="AA"></div>');
        }
        Jlistobj.append($(this));
        $('.cont').append(Jlistobj);
        itemindex++;
    });
    $('.cont .AA:first').css({'display':'none'});
    $('.cont .AA:last').addClass('LAST');
}

当我尝试添加新项目时，它不仅会添加到最后一列，还会添加到其他列中并且不再遵守最大列限制...

这让我发疯了..真的非常感谢任何帮助

提前谢谢你

请查看 FIDDLE

（按返回添加带文字输入的项目）

Answer 1

Demo试试这个，

function addFun(value)
{
var array=[];
$(".AA,.BB").each(function(i,v){
    array.push($(this).find('span').text());
});
if(jQuery.inArray( value, array )> -1)  
   {      
        alert("already availble..");      
   }
else     
   {  
        $('.LAST').append('<div class="BB"><span>'+value+'</span><button   onclick="$(this.parentElement).remove();">x</button></div>');        
   }  
}

Answer 2

像这样更改addFun功能： -

function addFun(value){
 var last=$('.AA.LAST');
 if(last.find('.BB').length<8){
   $('.LAST').append('<div class="BB"><span>'+value+'</span><button onclick="$(this.parentElement).remove();">x</button></div>');
  }else{ 
     last.removeClass('LAST');
     last.after('<div class="AA LAST"></div>');
     $('.LAST').append('<div class="BB"><span>'+value+'</span><button onclick="$(this.parentElement).remove();">x</button></div>');
   }   
}

Demo

jquery输入将项目和拆分列表附加到具有MAX限制的列中

请查看 FIDDLE

2 个答案: