訪問<span class =「xxx」>中的文字

這裏是jquery的新手。所以，請備用！我有我的MVC視圖生成的下面的標記。每行有4個元素 - id，name，date和編輯/刪除行的鏈接。我遇到的問題是，當我單擊編輯/刪除鏈接時（使用jquery執行此操作），我無法獲取該ID。這個id出現在class'customerId'的標籤內，如下所示。（包括我的HTML和jQuery）訪問<span class =「xxx」>中的文字

$('.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>

來源

2015-01-13 solar

你不會遠遠不夠了尋找.customerId之前，否則你的意圖是即期。使用.closest('tr')，你應該沒問題。

哦，你需要span.customerId < - 沒有空間！

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

來源

2015-01-13 00:28:49 sifriday

天哪！我不知道一個空間會導致這樣的悲傷！非常感謝你:) – solar

確實！空間意味着「內部」，所以在這裏我可以做'$（「body .post-tag」）'，我會得到身後的6個後置標籤。但是，如果我做'$（「body.post-tag」）'，那麼我正在尋找帶有* .post-tag類的body標籤，並且不會返回任何內容。微妙，但也很有用！ – sifriday

基本上，你只需要使用parent()或parents()功能。所以如果你點擊了編輯按鈕，從你的點擊回調$(this).parent()中選擇你的<tr>。所以你可以從那裏抓取任何其他的東西。

來源

2015-01-13 00:28:58

去由TR（父母（TR）），然後找到.customerId跨度 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。

來源

2015-01-13 00:31:54

使用代表團：

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

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

來源

2015-01-13 00:36:35

訪問<span class =「xxx」>​​中的文字

回答

相關問題

訪問<span class =「xxx」>中的文字