traversal - jquery traversing - there has to be a better way than mine! -

I would like to know that someone has a better way of using #type and #type-ani elements based on my HTML Is:

& lt; Tr & gt; & Lt; Th & gt; Type of organization & lt; / Th & gt; & Lt; Td id = "toggle" & gt; & Lt; Select name = "type" id = "type" & gt; & Lt; Option & gt; Church & lt; / Options & gt; & Lt; Option & gt; College & lt; / Options & gt; & Lt; Option & gt; Theater & lt; / Options & gt; & Lt; / Select & gt; & Lt; Input name = "type_new" id = "type_new" type = "text" / & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; & Nbsp; & Lt; / Th & gt; & Lt; Td> A class = "toggle" id = "type" & gt; & Lt; Small & gt; Add new type & lt; / Small> & Lt; / A & gt; & Lt; / Td> & Lt; / TR & gt;

This is my JavaScript:

  $ ("a.toggle"). Unbind ('click'). Click (function () {$ $ = $ (This) .parents () .Parent (). ("Td # toggle"); $ .select = $ .prev.find ("#type") $ .textbox = $ Prev.find ("#type_new"); if ($ .textbox.is (': visible') == true) $ (this) .find ("small") .html ("new Type "); other $ (this) .find (" small ") .html (" choose from exiting type "); $ .select.toggle (); $ .textbox.toggle (). Val (" "); });  

I know that there are other ways to exclude HTML to make JavaScript easier but definitely someone has a good way based on my current HTML.

Given that I am not just referred to by id or class, so I am also generating more of these flying with an AJAX. Load and all the elements have the same ID and classes Will be Why can not use indexed? Well I have been there and done this. To include all the new elements, I have to use more code in order to force the click event. I'm going to the easiest way here.

Thank you!

UPDATE: I want to emphasize the fact that I am adding the same element at the bottom of the page with an AJAX. Weight They will have different element names for $ _POST reasons but I want my Javascript function to be handled on display as every example. If I refer only to the ID, then it will update all the elements in all the ways of the page.

The ID must be unique if it is in your markup case, there is no need for complex traveler Because you can choose directly , so your first three rows can be skipped, or instead of:

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

or the entire contents of your click handler can be changed like this:

  if ($ ("#type_new"). (' : Visible ')) {$ (this) .Find ("small"). Html ("Add new type"); } And {$ (this) .find ("small"). Html ("Choose from Exiting Type"); $ ("#type") to ON () .; $ ("# Type_new") to turn ON () Val ("") .. }