在 <td> 中访问 <span class="xxx"> 文本

Question

这里是 jquery 的新手。所以，请放过！我的 MVC 视图生成了以下标记。每行有 4 个元素 - id、名称、日期和指向 edit/delete 该行的链接。我遇到的问题是，当我单击 edit/delete 链接（使用 jquery 执行此操作）时，我无法获取 ID。此 ID 位于带有 class '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 <-- 没有 space！

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

Answer 2

基本上，您只需要使用parent()或parents()函数即可。因此，如果您单击编辑按钮，从您的点击回调 $(this).parent() 内部将 select 您的 <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，以便为编辑按钮提供所需的信息，而不是让您每次单击 link 时都遍历 dom。

Answer 4

使用委派：

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

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

在 <td> 中访问 <span class="xxx"> 文本

access <span class="xxx"> text within a <td>

jquery

html

jquery-datatables