javascript - 如何获取使用相同名称的 id 数量

Question

我面临这样的问题，我无法提取属于相同名称的依赖ids。

这是我的 HTML

<table id="table-data" class="table table-bordered table-data" style="vertical-align: middle;">
    <tbody>
        <tr>
            <th style="width: 15%">Project</th>
            <th style="width: 15%">Module</th>
            <th style="width: 15%">Relevant Client</th>
            <th style="width: 20%">Task</th>
            <th style="width: 5%">Hours</th>
            <th style="width: 20%">Comments</th>
            <th></th>
        </tr>

        <tr id="1045">
            <input id="ChildId" name="ChildId" type="hidden" value="1045">
            <td>
                <select class="form-control input-sm valid" id="ProjectId0" name="ProjectId" onchange="iniatializeModuleClientAndTask(this)" onload="selecetTheTask(this)">
                    <option value="">--Select--</option>
                    <option selected="selected" value="1">Compliant Web</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ModuleId0" name="ModuleId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ClientId0" name="ClientId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="TaskId0" name="TaskId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <input class="form-control input-sm" id="ExpendedHour" name="ExpendedHour" type="text" value="4">
            </td>
            <td>
                <input class="form-control input-sm" id="TaskComments" name="TaskComments" type="text" value="a">
            </td>
            <td>
                <a class="removeButton btn btn-sm btn-danger" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-remove"></span></a>
                <a class="addButton btn btn-sm btn-primary" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-plus"></span></a>
            </td>
        </tr>

        <tr>
            <input id="ChildId" name="ChildId" type="hidden" value="0">
            <td>
                <select class="form-control input-sm" id="ProjectId1" name="ProjectId" onchange="iniatializeModuleClientAndTask(this)">
                    <option value="">--Select--</option>
                    <option value="1">Compliant Web</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ModuleId1" name="ModuleId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ClientId1" name="ClientId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="TaskId1" name="TaskId">
                    <option value="">-Select-</option>
                </select>
            </td>
            <td>
                <input class="form-control input-sm" id="ExpendedHour" name="ExpendedHour" type="text" value="">
            </td>
            <td>
                <input class="form-control input-sm" id="TaskComments" name="TaskComments" type="text" value="">
            </td>
            <td>
                <a class="removeButton btn btn-sm btn-danger" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-remove"></span></a>
                <a class="addButton btn btn-sm btn-primary" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-plus"></span></a>
            </td>

        </tr>

        <tr>
            <input id="ChildId" name="ChildId" type="hidden" value="0">
            <td>
                <select class="form-control input-sm" id="ProjectId2" name="ProjectId" onchange="iniatializeModuleClientAndTask(this)">
                    <option value="" id="ProjectId2">--Select--</option>
                    <option value="1">Compliant Web</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ModuleId2" name="ModuleId">
                    <option value="" id="ModuleId2">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ClientId2" name="ClientId">
                    <option value="" id="ClientId2">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="TaskId2" name="TaskId">
                    <option value="" id="TaskId2">-Select-</option>
                </select>
            </td>
            <td>
                <input class="form-control input-sm" id="ExpendedHouNaN" name="ExpendedHour" type="text" value="">
            </td>
            <td>
                <input class="form-control input-sm" id="TaskCommentNaN" name="TaskComments" type="text" value="">
            </td>
            <td>
                <a class="removeButton btn btn-sm btn-danger" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-remove"></span></a>
                <a class="addButton btn btn-sm btn-primary" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-plus"></span></a>
            </td>

        </tr>
        <tr>
            <input id="ChildId" name="ChildId" type="hidden" value="0">
            <td>
                <select class="form-control input-sm" id="ProjectId3" name="ProjectId" onchange="iniatializeModuleClientAndTask(this)">
                    <option value="" id="ProjectId3">--Select--</option>
                    <option value="1">Compliant Web</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ModuleId3" name="ModuleId">
                    <option value="" id="ModuleId3">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="ClientId3" name="ClientId">
                    <option value="" id="ClientId3">-Select-</option>
                </select>
            </td>
            <td>
                <select class="form-control input-sm" id="TaskId3" name="TaskId">
                    <option value="" id="TaskId3">-Select-</option>
                </select>
            </td>
            <td>
                <input class="form-control input-sm" id="ExpendedHouNaNaN" name="ExpendedHour" type="text" value="">
            </td>
            <td>
                <input class="form-control input-sm" id="TaskCommentNaNaN" name="TaskComments" type="text" value="">
            </td>
            <td>
                <a class="removeButton btn btn-sm btn-danger" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-remove"></span></a>
                <a class="addButton btn btn-sm btn-primary" style="padding:3px 0 3px 8px;"><span class="glyphicon glyphicon-plus"></span></a>
            </td>

        </tr>
    </tbody>
</table>

看看我的 HTML 代码，我有相同的名称，例如 ProjectId、ModuleId、TaskId 等等。实际上，表行数是动态传播的。所以 id 与名称不同。我这样做是因为在 MVC4 中，我可以在 POST 操作中轻松地按名称获取这些数据。但我迫切需要在 View 页面上做一些工作。所以我想计算有多少个 id 使用相同的类名。我想在这些类(class)上申请一些业务。

我经历过这个Question ，它安静的与我相似却又特别不同。他/她在那里显示了 id，而我的不同之处在于我想对它们进行计数。我还找到了另一个解决方案 answer ，但是它是用 CSS 完成的，我非常需要它在 Javascript 或 jQuery

中

而且ids的个数可以尽可能多，也可以不按ProjectId1、ProjectId2、然后的顺序排列>projectId99 但它们中的每一个都将位于 ProjectId 类下。因此我想通过它的名称获取总数的ID。谢谢。

Answer 1

如果你有几个同名的元素，那么你可以简单地使用 jQuery 的 length 或 size() 来查找所选元素的数量。请参阅Documentation了解详情。

因此，以下内容应返回名称属性为“projectId”的元素数量

$('[name=projectId]').length;

The number of elements currently matched. The .size() method will return the same value.

此外，如果您需要计算具有 name=projectId 的所有元素以及以 ProjectId 开头的 Id(ProjectId1、ProjectId2 ... 等)，那么您可以使用"Attribute starts with selector"以及如下所示:

$('[id^=Projectid][name=projectId]').length;

或者，所有至少有一个 id 的元素:

$('[id][name=projectId]').length;

$('#Res').text("Number of Elemnts in with name 'projectId' : " +$('[name=projectId]').length);

$('#Res1').text("Number of Elemnts in with name 'projectId' and Id starting with 'test': " +$('[id^=test][name=projectId]').length);

$('#Res2').text("Number of Elemnts in with name 'projectId' and containing an Id : " +$('[id][name=projectId]').length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" name="projectId"></div>
<div id="test1" name="projectId"></div>
<div id="test2" name="projectId"></div>
<div id="test3" name="projectId"></div>
<div id="anyId" name="projectId"></div>
<div name="projectId"></div>
<div id="Res"></div>
<div id="Res1"></div>
<div id="Res2"></div>