循環中的jquery類選擇器

我有一個關於jquery中的表達式的簡單問題來選擇一個涉及for循環的類。基本上，我有兩個步驟： 1.用循環生成一些html表格。 2.使用jQuery取消隱藏它們。循環中的jquery類選擇器

下面是簡化的代碼以 1.產生的HTML表格（I將添加循環索引以分離每個環路創建的表）： 2.第二步的關鍵部分是取消隱藏生成的表格。我的選擇器寫成：method_options_1'+i+'，其中我是for循環索引。

for (var i = 2; i <= 5; i++) { 
    <tr class="method_options_1'+i+'" style="display: none;"><th><label for="id_CAM_1">Chemical application Method (CAM):</label></th> 
     <td><select name="CAM_1_'+i+'" id="id_1_'+i+'"> 
     <option value="2">2-Interception based on crop canopy</option> 
     <option value="9">9-Linear foliar based on crop canop</option></select> 
     </td></tr> 

    $('.method_options_1'+i).closest('tr').show(); 
}

但是，這個選擇器不起作用，這意味着我無法顯示隱藏的元素。而如果我從HTML和jquery中刪除索引i，選擇器就可以工作。由於我必須保留i索引，任何人都可以給我一些建議（我嘗試刪除最近的（'tr'），但它不起作用）？

來源

2012-06-29 tao.hong

那是哪裏HTML從？它來自構建html的程序代碼？ – biziclop

我將使用jquery來即時生成html。 –

'.method_options_1'+i已經是tr，所以先嚐試刪除closest('tr')步：

$('.method_options_1'+i).show();

見http://jsfiddle.net/WJDCm/

來源

2012-06-29 18:14:08 biziclop

感謝您的回覆。我嘗試刪除最近的（'tr'），但它不起作用 –

適用於我：http://jsfiddle.net/WJDCm/3/ – biziclop

感謝您的幫助。我知道你的代碼應該可以工作，但不知何故，我的工作不起作用。我需要重新檢查它 –

這是因爲就如JavaScript而言，name是一個簡單的字符串：method_options_1'+i'。它不評估該字符串內的任何代碼。如果你想要做是正確的，做這樣的事情：

HTML：

<tr class="method_options">etc</tr>

的Javascript：

$('.method_options:eq('+i+')').show();

編輯：

也許我誤解。您正在使用Javascript for循環生成此代碼，因此i是代碼空間中的有效變量。如果是這樣的話，那麼你只需要取出closest()，因爲它告訴jQuery沿着DOM行進並選擇它找到的第一個tr。在這種情況下，這似乎不算什麼。您想要處理您選擇的tr，而不是您選擇的父母的tr。

來源

2012-06-29 18:14:13 teh1

感謝您的意見 –

我真的不知道如何運行上面的代碼...但是這樣做確實工作

HTML：

<table id='myTable'> 
</table>

的JavaScript：

$(function(){ 

    for (var i = 2; i <= 5; i++) { 
    $('#myTable').append('<tr class="method_options_1'+i+'" style="display: none;"><th><label for="id_CAM_1">Chemical application Method (CAM):</label></th><td><select name="CAM_1_'+i+'" id="id_1_'+i+'">  <option value="2">2-Interception based on crop canopy</option>  <option value="9">9-Linear foliar based on crop canop</option></select>  </td></tr>'); 


    $('.method_options_1'+i).closest('tr').toggle('slow'); 
    } 


})

Solution

來源

2012-06-29 18:48:15

感謝您的幫助！ –

循環中的jquery類選擇器

回答

相關問題