JQuery найти элемент один элемент над - PullRequest
Новая
       17

JQuery найти элемент один элемент над

0 голосов
/ 05 октября 2011

Хорошо.У меня есть мои настройки 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>

Ответы [ 3 ]

1 голос
/ 05 октября 2011

Вам просто нужно подняться на один уровень (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>
1 голос
/ 05 октября 2011

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

$(".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();
});
0 голосов
/ 05 октября 2011

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

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

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

...