Next occurrence of something, down the DOM tree

I'm having the hardest time trying to reference the next occurrence of an element with an ID containing a specific string.

Basically, I have a link, and I need to show() the NEXT div acting as a container for editing.

<div>
<a href="#" id="link-1">Link</a> // go from here
</div>

<div id="form-container-1" class="hidden"> // to here
<form>
...
</开发者_开发知识库form>

Important to note: I'm not just targeting one id ... the purpose of the "1" within the form-container id is because there are several. I'm using the "contains" selector id*="form-container"

If you want to dynamically find the correct form to show based on the id then something like:

$('a').click( function() {
   formId = $(this).attr('id').split('-')[1];
   $('#form-container-'+formId).show();
});

Alternatively, if you want to find the next form after each link:

$('a').click( function() {
   $(this).next('form').show();
});

Both of these, it would be advisable to add a unique class to links that will show forms and update the selectors accordingley.

If it directly proceeds the current item, then will work.

Try using a combination of parent() and next() then. This way you will be able to reference the containing div and then find the next div.

Working example: http://jsfiddle.net/PdatP/

jQuery:

$('a').click(function(){
   $(this).parent().next().show(); 
});

This will get the next sibling and show that element

    $('#link-1').next().show();

if its not exactly the next element you can use siblings method like;

   $('#link-1').siblings('#form-container-1').show();

Or if you want to show all elements that contain form-container in their ids

   $('#link-1').siblings('[id*="form-container"]').show();

$("#link-1").parent().next().show();