Question

这里是jquery的新手。所以，请多余！我有我的MVC视图生成的以下标记。每行有4个元素 - id，name，date和编辑/删除行的链接。我遇到的问题是，当我点击编辑/删除链接（使用jquery执行此操作）时，我无法获取ID。此ID存在于标记内，其类为“customerId”，如下所示。（包括我的HTML和Jquery）

 $('.EditLink').click(function(e) {
   var id = $(this).closest('td').find('span .customerId').text();
   alert(id);
 });

<table id="CustomerTable" class="table table-striped table-bordered table-hover" data-toolbar="#custTable" data-sort-name="name" data-sort-order="desc" data-pagination="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true">
  <thead>
    <tr>
      <th data-field="id" data-align="center" data-sortable="true">Customer Id</th>
      <th data-field="name" data-sortable="true" data-formatter="nameFormatter">Customer Name</th>
      <th data-field="date" data-sortable="true">Modified Date</th>

      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="customerId">1</span>
      </td>
      <td>
        <a href="/Customer/Details?customerId=1">TestCompany</a>

      </td>


      <td>
        1/6/2015 11:06:04 AM</td>

      <td>
        <a href="/Customer/Details?customerId=1">Details</a> |
        <a class="EditLink" href="javascript:void(0)">Edit</a> |
        <a class="DeleteLink" href="javascript:void(0)">Delete</a>
      </td>
    </tr>
    <tr>
      <td>
        <span class="customerId">2</span>
      </td>
      <td>
        <a href="/Customer/Details?customerId=2">Sample Company</a>

      </td>


      <td>
        1/6/2015 11:06:04 AM</td>
      <td>

        <a href="/Customer/Details?customerId=2">Details</a> |
        <a class="EditLink" href="javascript:void(0)">Edit</a> |
        <a class="DeleteLink" href="javascript:void(0)">Delete</a>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

在寻找.customerId之前你没有走得太远，否则你的意图就是现实。使用.closest('tr')，您应该没问题。

哦，你需要span.customerId＆lt; - 没有空格！

 $('.EditLink').click(function(e) {
   var id = $(this).closest('tr').find('span.customerId').text();
   alert(id);
 });

Answer 2

基本上，您只需要使用parent()或parents()功能。因此，如果您点击了修改按钮，则从您的点击回调$(this).parent()中选择您的<tr>。所以你可以从那里抓住任何其他东西。

Answer 3

转到tr（parents（tr）），然后找到.customerId span http://jsfiddle.net/cm1p47xb/

$(document).ready(function() {
     $('#CustomerTable').on('click','.EditLink', function(e) {
       var id = $(this).parents('tr').find('span.customerId').text();
       alert(id);
     });
});

但是，我真的会更改生成的html，为编辑按钮提供所需的信息，而不是每次点击链接时都会让你遍历dom。

Answer 4

使用委托：

$('#CustomerTable tr').on('click', '.EditLink', function(){
    var id = $(this).find('span.customerId').text()
});

来源：http://api.jquery.com/delegate/

访问<span class =“xxx”> </span>中的文字

4 个答案: