Question

我遇到了类似的问题，我无法提取属于同一ids的从属name。

这是我的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操作中按名称获取这些数据。但我非常需要在视图页面上做一些工作。所以我想计算有多少ID使用相同的类名。我想在这些课程上应用一些业务。

我已经完成了这个Question，它与我有着特别的不同。在那里他/她显示了ID，我的区别是我想count他们。我还找到了另一个解决方案answer，但是已经在CSS中完成了我在Javascript或jQuery

中需要它

此外ids的数量可以尽可能多，可能不是ProjectId1，ProjectId2，然后是projectId99，但每个都是ProjectId在name课程下。因此我希望得到总数ids <div class="container"> <button class="btn btn-default btn-lg btn-link" style="font-size:36px;"> <span class="glyphicon glyphicon-comment"></span> </button> <span class="badge badge-notify">3</span> </div> .badge-notify{ background:red; position:relative; -moz-transform: translate(-100%, -100%); /* For Firefox */ -ms-transform: translate(-100%, -100%); /* for IE */ -webkit-transform: translate(-100%, -100%); /* For Safari, Chrome, iOS */ -o-transform: translate(-100%, -100%); /* For Opera */。谢谢。

Answer 1

如果您有一些属于同一个名称的元素，那么您只需使用jQuery的length或size()来查找所选元素的数量。有关详细信息，请参阅Documentation。

因此，以下内容应返回名称属性为“projectId”

的元素数

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

目前匹配的元素数量。 .size（）方法将返回相同的值。

此外，如果您需要使用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>

Answer 2

非jquery方法：

我建议使用document.querySelectorAll。

以下是我按名称获取元素的示例：ModuleId，ProjectId和ClientId。

var names = ["ProjectId", "ModuleId", "ClientId"]

for (let i = 0; i < names.length; i++)
{
  let temp = names[i];
  let things = document.querySelectorAll(`[name="${temp}"]`);
  console.log(temp, "count:", things.length);
}

<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>

Answer 3

您可以像这样找到所有行或特定行中的所有ID $（'tr + tr [name = ProjectId]'）。length

$('#ProjectIdResult').text("ProjectID in all rows: "+$('tr + tr [name=ProjectId]').length);
$('#ModuleIdResult').text("ModuleID in all rows: "+$('tr + tr [name=ModuleId]').length);
$('#TaskIdResult').text("TaskID in all rows: "+$('tr + tr [name=TaskId]').length);
$('#ClientIdResult').text("ClientID in all rows: "+$('tr + tr [name=ClientId]').length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

<div id="ProjectIdResult">
</div>
<div id="ModuleIdResult">
</div>
<div id="TaskIdResult">
</div>
<div id="ClientIdResult">
</div>

如何获取使用相同名称的ID计数

3 个答案: