如何计算我创建的对象数量？

Question

我可以使用以下 html 编码创建成员对象。但是对于某些计算，我需要获取成员对象的计数。此外，当我删除其中一个成员对象时，它应该减少成员对象的数量。

以下函数将创建成员。

function appendMember(rowNumber) {
    debugger

    var subrowNumber = parseInt($("#itemmapWrapper" + rowNumber + "").attr("data-subrowNumber"));


    subrowNumber = isNaN(subrowNumber) ? 1 : subrowNumber + 1;

    var addNewItemDetailHtml = "<div class='col-lg-10 col-md-10 col-sm-10 col-xs-10 itemmapAllocationWrapper  custom-paaddingnone form-group' \
                               id='dvaddNewItemDetailSub" + subrowNumber + "' data-subrowNumber='" + subrowNumber + "'>";

    addNewItemDetailHtml += "<div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 custom-paaddingnone'>\
                                <div class='col-lg-3 col-md-3 col-sm-3 col-xs-3 custom-paaddingnone text-center'>\
                                </div>\
                                <div class='col-lg-9 col-md-9 col-sm-9 col-xs-9 custom-paaddingnone'>\
                                    <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12 custom-paaddingnone'>\
                                        <div class='col-lg-10 col-md-10 col-sm-10 col-xs-10 custom-paaddingnone'>\
                                            <select class='form-control' id ='memberid"+ rowNumber + subrowNumber + "' ></select>\
                                        </div>\
                                    </div>\
                                </div>\
                             </div>";

    addNewItemDetailHtml += "<div class='col-lg-2 col-md-2 col-sm-2 col-xs-2 custom-paaddingnone'>\
                                <span class='glyphicon glyphicon-trash removeBtn' onclick = 'removeMemberDetail(this)' ></span >\
                            </div>";

    addNewItemDetailHtml += "</div>";

    addNewItemDetailHtml += "</div>";



    $("#itemmapWrapper" + rowNumber + "").attr("data-subrowNumber", subrowNumber);
    $(".memberContainer").append(addNewItemDetailHtml);
    intialize_memberDropDown(rowNumber, subrowNumber);
}

此代码将从数据库中获取数据到成员选择菜单。

function intialize_memberDropDown(rowNumber, subrowNumber) {
    $.ajax({
        type: "GET",
        url: "/Member/GetAllMember/",
        cache: false,
        success: function (data) {
            debugger
            var countryHTMLString = "<option value ='0'>Select Member</option>";
            if (data.isSucess) {
                $.each(data.data, function (index, item) {
                    countryHTMLString += "<option value ='" + item.memberid + "'>" + item.membername + "</option>";

                });
            }
            $("#memberid" + rowNumber + subrowNumber + "").html(countryHTMLString)
            calculateTotalHotailBill(rowNumber)
        }, error: function (err) {
            debugger
        }
    });
}

此最终代码将删除成员之一，我单击在附加成员函数上实现的垃圾按钮。

function removeMemberDetail(buttonElement) {
    debugger
    $(buttonElement).parents(".itemmapAllocationWrapper").remove();

    if ($(".itemmapAllocationWrapper").html() == "") {
        $("#memberid").removeAttr("disabled");
    }
}

Answer 1

您可以计算您的 memberContainer 的子项。如果你只有一个，我会给它一个 id 而不是类名。但它是双向的。

console.log(document.getElementsByClassName("memberContainer")[0].children.length)

<div class="memberContainer">
  <div>child</div>
  <div>child</div>
  <div>child</div>
</div>

Answer 2

只需添加一个带有 0 值的隐藏输入或任何您的对象初始值，每次使用添加成员代码时增加它，当您使用删除成员时减少它 你的html

<input type='hidden' id='objectsCounter' value='0'>

java脚本增加函数在最后添加这一行

var objectCounter = document.getElementById('objectsCounter').value;
objectCounter++;
document.getElementById('objectsCounter').value = objectCounter

并在删除成员函数的末尾添加这个

var objectCounter = document.getElementById('objectsCounter').value;
objectCounter--;
document.getElementById('objectsCounter').value = objectCounter

你可以使用任何时间获取对象的值

var objectCounter = document.getElementById('objectsCounter').value;