javascript - 限制div中元素的数量

Question

我的 div 有问题

就是这里了

这是它的代码

<div class="listdivright">
        <div style="height: 80%; width: 100%; overflow: auto">

                @foreach (var item in Model)
                {
                   <div class="title" style="margin-top:15px;margin-left:15px; margin-bottom: 10px;">
                       <img class="click"   src="@Url.Content("~/Images/plus_plus.png")" />
                        <span>
                           @Html.TextBoxFor(modelItem => item.question, new {@class="testclass", @readonly = "readonly" })
                         </span>

                       <a class="click2"  style="margin-left:10px;">
                           <img src='@Url.Content("~/Images/arrow.png")' />
                       </a>
                       <a style="margin-left:25px;" href='@Url.Action("Edit", "Questions", new {id = item.QuestionId})'>
                           <img src='@Url.Content("~/Images/Edit.png")' />
                       </a>
                       <a href='@Url.Action("Delete", "Questions", new {id = item.QuestionId})'>
                           <img src='@Url.Content("~/Images/Delete.png")' />
                       </a>
                   </div>
                   <div class="content" style="margin-left:60px; width: 80%; height: 100px; background: white">
                        <div style="width: 100%">
                            <div style="float:left; width: 50%;">
                                <b>@Html.LabelFor(modelItem=>item.TimeForAnswer)</b>
                                <b>:</b>
                                <span>@Html.DisplayFor(modelItem=>item.TimeForAnswer)</span>
                            </div>
                            <div style="float:right;width: 50%;">
                                <b>@Html.LabelFor(modelItem => item.TimeForReady)</b>
                                <b>:</b>
                                <b>@Html.DisplayFor(modelItem => item.TimeForReady)</b>
                            </div>
                        </div>
                       <div style="width: 100%; text-align: center;" >
                           <b>@Html.LabelFor(modelItem => item.Retries)</b>
                           <b>:</b>
                           <b>@Html.DisplayFor(modelItem => item.Retries)</b>
                       </div>
                   </div>
                }

        </div>

我使用JS将 block 移动到左侧div

JS脚本代码

<script type="text/javascript" >
$('.title').on('click', function () {
    $(this).next().toggle();
});
$('.click2').click(function () {
    var elem = $(this).closest('.title');
    $('.title2').append($(elem).html()).show();

});

这是左侧div的代码

<div class="listdivleft">
        <div style="height: 80%; width: 100%; overflow: auto">
           <div class="title2" style="margin-top: 15px; margin-left: 15px; margin-bottom: 15px;padding-top: 10px">
                </div>
           </div>
       </div>

我需要限制左侧 div 中的 block 。从 0 到 10。

所以可以是 0 或不超过 10

我怎样才能做到这一点？

Answer 1

您可以使用 length 检查 title 类的元素是否小于 10属性，在这种情况下，只应附加新的 html，例如:

 if($(".title").length < 10) {
    var elem = $(this).closest('.title');
    $('.title2').append($(elem).html()).show();
 }
 else {
    alert("No more than 10 allowed.");
 }

或者，如果标题类也在页面上的其他地方重用，则使用 listdivright 类元素与 closest 组合将其限制为当前父元素。和 find :

if($(this).closest(".listdivright").find(".title").length < 10) {
    var elem = $(this).closest('.title');
    $('.title2').append($(elem).html()).show();
 }
 else {
    alert("No more than 10 allowed.");
 }

希望它能对您有所帮助，并让您了解如何做到这一点。