如何在 jQuery 中访问部分 HTML 元素的 ID？答案

【问题标题】：How to access a part of HTML element's Id in jQuery?如何在 jQuery 中访问部分 HTML 元素的 ID？
【发布时间】：2014-05-05 12:59:31
【问题描述】：

我有以下表格的 HTML 代码：

    <table id="blacklistgrid_1"  class="table table-bordered table-hover table-striped">
                          <thead>
                            <tr>
                              <th style="vertical-align:middle">Products</th>
                              <th style="vertical-align:middle">Pack Of</th>
                              <th style="vertical-align:middle">Quantity</th>
                              <th style="vertical-align:middle">Volume</th>
                              <th style="vertical-align:middle">Unit</th>
                              <th style="vertical-align:middle">Rebate Amount</th>
                            </tr>
                          </thead>
                          <tbody class="apnd-test">
    <tr id="reb1_1">
    <td><input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/></td>
                              <td><input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/></td>
                              <td><input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/></td>
    </tr>
                          </tbody>
<tfoot>
                        <tr id="reb1_2">
                          <td><button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick="">&nbsp;Add</button></td>


<td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                  </tfoot>
</table>

我在上面的表格中关注了 jQuery 代码：

    $(document).ready(function() {
    $('.products').click(function () {
        var new_row = $('#reb1').clone();
        /*Here I want to use the id as #blacklistgrid_1. As the there may be more than one tables present the ids could be #blacklistgrid_2, #blacklistgrid_3, and so on. So it should be dynamic not static for value 1*/
        var tbody = $('tbody', '#blacklistgrid');

/*And in this line too, I want to access the tr and t body of that table with specific id only*/
        var n = $('tr', tbody).length  + 1;
        new_row.attr('id', 'reb' + n);
        $(':input', new_row).not('.prod_list').remove();
        //new_row.find("td:eq(1)").html();
        $('<button style="color:#C00; opacity: 2;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">&times;</button>').appendTo( $(new_row.find('td:first')) );
        tbody.append(new_row);
        $('.delete').on('click', deleteRow);
       });
    });

我已经在上面的代码中以注释的形式写下了我的要求。所以有人请帮助我实现这一目标。谢谢。

【问题讨论】：

你不能简单地通过某个特定的类来获取它们并通过each进行迭代吗？
如果您使用类 blacklistgrid 而不是顺序 ID 会怎样？然后你可以遍历类匹配的元素集合。（另见@intracept 的评论）
@HawkenRives：不，我不想上课。我只想要动态 ID。
为什么不上课呢？这是最简单、最有效的方法。
但我真的认为你想要上课。这是他们擅长的一部分。不能使用类是硬性要求吗？

标签： javascript jquery html html-table

【解决方案1】：

您可以自己编写代码，id 以 blacklistgrid

开头

$('[id^= blacklistgrid_]') // here you can access all elements whose id starts 
                          // with backlistgrid_

以及访问他们的特定孩子

$('[id^= blacklistgrid_]>td')

其他人试图在 cmets 中解释什么，

这里使用class 选择器，您将访问他们的id

$.each('.table', function () {  // iterate all the table elements
    var id = $(this).prop('id');
    if (id === "blacklistgrid_1") {  // check for the ids
        //Perform ToDos
        var tds = $(this).find('td');
        // using tds perform its ToDos
    }
});

【讨论】：