jquery遍歷 - 必須有比我更好的方法！

Question

我想知道，如果有人有更好的方式來訪問元素#TYPE和#type_new根據我的html：

<tr> 
    <th>Type of Organization</th> 
    <td id="toggle"> 
    <select name="type" id="type"> 
     <option>Church</option> 
     <option>College</option> 
     <option>Theatre</option> 
    </select> 
    <input name="type_new" id="type_new" type="text" />       
    </td> 
</tr> 
<tr> 
    <th>&nbsp;</th> 
    <td><a class="toggle" id="type"><small>Add New Type</small></a></td> 
</tr> 

這裏是我的javascript：

$("a.toggle").unbind('click').click(function(){ 
    $.prev = $(this).parents().parent().prev().find("td#toggle"); 
    $.select = $.prev.find("#type"); 
    $.textbox = $.prev.find("#type_new"); 

    if($.textbox.is(':visible')==true) 
    $(this).find("small").html("Add New Type"); 
    else 
    $(this).find("small").html("Choose From Exisiting Types"); 
    $.select.toggle(); 
    $.textbox.toggle().val(""); 
}); 

我知道有是其他方式來佈局的HTML，使JavaScript更容易，但肯定有人有一個很好的方式基於我當前的HTML。

可能值得注意的是，我不只是通過ID或CLASS引用的原因是我也用ajax .load生成了更多的這些動態，並且所有元素都將具有相同的id和類。爲什麼不使用你可能會問的索引？那麼我已經去過那裏了。我不得不實際使用更多代碼來重新綁定點擊事件以包含所有新元素。我會盡可能以最簡單的方式。

謝謝！

更新： 我想強調一個事實，即使用ajax .load在頁面的更下方添加相同的元素。由於$ _POST的原因，它們會有不同的元素名稱，但我希望我的JavaScript函數能夠處理每個實例。如果我僅通過ID引用它，它將更新頁面中的所有元素。

Answer 1

ID應該是唯一的。如果是這樣的話在你的標記的情況下，那麼就不需要複雜的穿越，你可以直接選擇它們，這樣你的前三行代碼可以被省略或代替僅僅是：

$.prev = $("td#toggle"); 
$.select = $("#type"); 
$.textbox = $("#type_new"); 

或您的點擊處理程序的全部內容可以替換爲：

if($("#type_new").is(':visible')) { 
    $(this).find("small") 
      .html("Add New Type"); 
} else { 
    $(this).find("small").html("Choose From Exisiting Types"); 
    $("#type").toggle(); 
    $("#type_new").toggle().val(""); 
}