javascript - 使用 Jquery 不循环地从另一个 div 中删除一定数量的 div

Question

我想使用jquery删除父div内第12个div之后的所有div。标记如下:

<div id="dvNames" class="container grayBox float-left">
<div class="float-left margin-bottom-10 width-33-per divContainer"><div class="float-left"><input placeholder="LastName,FirstName" onchange="CheckVisitorName(this)" class="width-180 reset" name="name_30" type="text"></div><br></div><div class="float-left margin-bottom-10 width-33-per divContainer"><div class="float-left"><input placeholder="LastName,FirstName" onchange="CheckVisitorName(this)" class="width-180 reset" name="name_31" type="text"></div><br></div><div class="float-left margin-bottom-10 width-33-per divContainer"><div class="float-left"><input placeholder="LastName,FirstName" onchange="CheckVisitorName(this)" class="width-180 reset" name="name_32" type="text"></div><br></div><div class="float-left margin-bottom-10 width-33-per divContainer"><div class="float-left"><input placeholder="LastName,FirstName" onchange="CheckVisitorName(this)" class="width-180 reset" name="name_33" type="text"></div><br></div><div class="float-left margin-bottom-10 width-33-per divContainer"><div class="float-left"><input placeholder="LastName,FirstName" onchange="CheckVisitorName(this)" class="width-180 reset" name="name_34" type="text"></div><br></div><div class="float-left margin-bottom-10 width-33-per divContainer"><div class="float-left"><input placeholder="LastName,FirstName" onchange="CheckVisitorName(this)" class="width-180 reset" name="name_35" type="text"></div><br></div><div class="float-left margin-bottom-10 width-33-per divContainer"><div class="float-left"><input placeholder="LastName,FirstName" onchange="CheckVisitorName(this)" class="width-180 reset" name="name_36" type="text"></div><br></div><div class="float-left margin-bottom-10 width-33-per divContainer"><div class="float-left"><input placeholder="LastName,FirstName" onchange="CheckVisitorName(this)" class="width-180 reset" name="name_37" type="text"></div><br></div><div class="float-left margin-bottom-10 width-33-per divContainer"><div class="float-left"><input placeholder="LastName,FirstName" onchange="CheckVisitorName(this)" class="width-180 reset" name="name_38" type="text"></div><br></div><div class="float-left margin-bottom-10 width-33-per divContainer"><div class="float-left"><input placeholder="LastName,FirstName" onchange="CheckVisitorName(this)" class="width-180 reset" name="name_39" type="text"></div><br></div><div class="float-left margin-bottom-10 width-33-per divContainer"><div class="float-left"><input placeholder="LastName,FirstName" onchange="CheckVisitorName(this)" class="width-180 reset" name="name_40" type="text"></div><br></div><div class="float-left margin-bottom-10 width-33-per divContainer"><div class="float-left"><input placeholder="LastName,FirstName" onchange="CheckVisitorName(this)" class="width-180 reset" name="name_41" type="text"></div><br></div><div class="float-left margin-bottom-10 width-33-per divContainer"><div class="float-left"><input placeholder="LastName,FirstName" onchange="CheckVisitorName(this)" class="width-180 reset" name="name_42" type="text"></div><br></div><div class="float-left margin-bottom-10 width-33-per divContainer"><div class="float-left"><input placeholder="LastName,FirstName" onchange="CheckVisitorName(this)" class="width-180 reset" name="name_43" type="text"></div><br></div><div class="float-left margin-bottom-10 width-33-per divContainer"><div class="float-left"><input placeholder="LastName,FirstName" onchange="CheckVisitorName(this)" class="width-180 reset" name="name_44" type="text"></div><br></div><div class="float-left margin-bottom-10 width-33-per divContainer"><div class="float-left"><input placeholder="LastName,FirstName" onchange="CheckVisitorName(this)" class="width-180 reset" name="name_45" type="text"></div><br></div><div class="float-left margin-bottom-10 width-33-per divContainer"><div class="float-left"><input placeholder="LastName,FirstName" onchange="CheckVisitorName(this)" class="width-180 reset" name="name_46" type="text"></div><br></div><div class="float-left margin-bottom-10 width-33-per divContainer"><div class="float-left"><input placeholder="LastName,FirstName" onchange="CheckVisitorName(this)" class="width-180 reset" name="name_47" type="text"></div><br></div>
</div>

我知道我们可以像 $('#dvNames div') 那样获取父 div 内的所有 div。通过像 $('#dvNames div').remove() 一样删除，可以删除所有 div。我们也可以通过 $('#dvNames div:first') 获取每个。

所以我最终得到了

for(;$('#dvNames div').length>12;) $('#dvNames div:first').remove()

它是我想要的，但我觉得必须有某种方法可以在没有循环的情况下实现它。

如果您知道如何不循环地执行此操作，请帮助我。

Answer 1

我认为您正在寻找的是 .slice()

$('#dvNames > div').slice(12).remove()

演示:Fiddle