jquery finding the element one element over

Ok. I have my html setup like.

<div id="wrap">
   <div class="left"></div>
   <div class="right">
      <a href="#">link</a>
   </div>
   <div class="listings" style="display:none">
      <ul>
         <li>Listing 1</li>
         <li>Listing 2</li>
         <li>Listing 3</li>
      </ul>
   </div>
</div>

What I am trying to do is when the link in "right" is clicked it will find the listings div and then show it, problem is, I need to know the height of the UL container prior to showing it so I can resize and show accordingly.

The other issue is, the content is dynamicly created so it can have multiple left/right/listings combinations displayed on the page. I don't handle that portion of the product I just develop the front end UI to work with the stuff put out. So I'm at an impass as I have tried everything I can think of from siblings to parents to find maybe I am just tackling it wrong..

Here is an example of the same as above but what it can look like with more than one instance (which is part of my issue I think)..

<div id="wrap">
       <div class="left"></div>
       <div class="right">
          <a href="#">link</a>
       </div>
       <div class="listings" style="display:none">
          <ul>
             <li>Listing 1</li>
             <li>Listing 2</li>
             <li>Listing 3</li>
          </ul>
       <div>
       <div class="left"></div>
       <div class="right">
          <a href="#">link</a>
       </div>
       <div class="listings" style="display:none">
          <ul>
             <li>Listing 1</li>
             <li>Listing 2</li>
             <li>Listing 3</li>
          </ul>
       <div>
       <div class="left"></div>
       <div class="right">
          <a href="#">link</a>
       </div>
       <div class="listings" style="display:none">
          <ul>
             <li>Listing 1</li>
             <li>Listing 2</li>
             <li>Listing 3</li>
          </ul>
       <div>
       <div class="left"></div>
   开发者_JAVA技巧    <div class="right">
          <a href="#">link</a>
       </div>
       <div class="listings" style="display:none">
          <ul>
             <li>Listing 1</li>
             <li>Listing 2</li>
             <li>Listing 3</li>
          </ul>
       <div>
    </div>

is this what you want?:

$(".right a").click(function( e ) {
    $(this) //a-element
        .parent() // div.right
            .next() // div.listings
            .toggle(); //Hide and show depending on what it was
    e.preventDefault();
});

You can remove the comments and write it on one line if you want.

if its dynamic loaded with AJAX or not loaded on the DOM you can use live event:

$(".right a").click("click", function( e ) {
    $(this) //a-element
        .parent() // div.right
            .next() // div.listings
            .toggle(); //Hide and show depending on what it was
    e.preventDefault();
});

You just need to go up one level (parent), move to the next element (next), and show it:

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

Demo: http://jsfiddle.net/ambiguous/jRVxe/

I'm assuming that you're HTML was a little messed up, I think a lot of the <div> should have been </div>:

<div id="wrap">
    <div class="left"></div>
    <div class="right">
        <a href="#">link</a>
    </div>
    <div class="listings" style="display:none">
        <ul>
            <li>Listing 1</li>
            <li>Listing 2</li>
            <li>Listing 3</li>
        </ul>
    </div>
    <div class="left"></div>
    <div class="right">
        <a href="#">link</a>
    </div>
    <div class="listings" style="display:none">
        <ul>
            <li>Listing 1</li>
            <li>Listing 2</li>
            <li>Listing 3</li>
        </ul>
    </div>
    <div class="left"></div>
    <div class="right">
        <a href="#">link</a>
    </div>
    <div class="listings" style="display:none">
        <ul>
            <li>Listing 1</li>
            <li>Listing 2</li>
            <li>Listing 3</li>
        </ul>
    </div>
    <div class="left"></div>
    <div class="right">
        <a href="#">link</a>
    </div>
    <div class="listings" style="display:none">
        <ul>
            <li>Listing 1</li>
            <li>Listing 2</li>
            <li>Listing 3</li>
        </ul>
    </div>
</div>

First of all you must keep some mapping for it for say keep an ID for listing divs and and invoke a function on click of link that contains the id.

>  <div class="left"></div>
>        <div class="right">
>           <a href="#" onclick="someFunction('id1');">link</a>
>        </div>
>        <div id="id1" class="listings" style="display:none">
>           <ul>
>              <li>Listing 1</li>
>              <li>Listing 2</li>
>              <li>Listing 3</li>
>           </ul>
>        <div>

else it will be very confusing for you