jquery поиск элемента один элемент над

Question

Хорошо. У меня есть моя настройка html.

<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> 

То, что я пытаюсь сделать, это когда ссылка на «право» щелкают будет найти списки DIV, а затем показать его, проблема в том, что мне нужно знать высоту контейнера UL перед показу поэтому я могу изменить размер и показать соответственно.

Другая проблема заключается в том, что контент динамически создается, поэтому он может иметь несколько комбинаций слева и справа/списки, отображаемых на странице. Я не обрабатываю ту часть продукта, с которой я только что развиваю интерфейс интерфейса, чтобы работать с вещами. Поэтому я нахожусь в безрассудстве, поскольку я пробовал все, что мог подумать от братьев и сестер, родителям, чтобы найти, может быть, я просто справляюсь с этим неправильно.

Вот пример того же, что и выше, но то, что он может выглядеть с более чем одним экземпляром (который является частью моего вопроса, я думаю) ..

<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> 

Answer 1

это то, что вы хотите ?:

$(".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(); 
}); 

вы можете удалить комментарии и писать в одной строке, если вы хотите.

если его динамическое загружены с помощью AJAX или не загружены на DOM вы можете использовать живое событие:

$(".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(); 
}); 

Answer 2

Прежде всего, вы должны держать некоторое отображение ему для скажем сохранить идентификатор для перечисления дивы и и вызывать функция по щелчку ссылки, содержащей идентификатор.

> <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> 

иначе это будет очень запутанной для вас

Answer 3

Вам просто нужно подняться на один уровень (parent), перейти к следующему элементу (next), и показать его:

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

Демо: http://jsfiddle.net/ambiguous/jRVxe/

Я предполагаю, что вы HTML был немного перепутались, я думаю, что многие из <div> должны были </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>