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 容器的高度，以便我可以调整大小并显示因此。

另一个问题是，内容是动态创建的，因此页面上可以显示多个左/右/列表组合。我不处理产品的那部分，我只是开发前端 UI 来处理发布的内容。所以我陷入了僵局，因为我已经尝试了从兄弟姐妹到父母的所有我能想到的方法，却发现也许我只是解决了错误。

这是一个与上面相同的例子，但是如果有多个的话，它会是什么样子实例（我认为这是我的问题的一部分）..

<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

您只需上升一级（parent），移至下一个元素（next），然后显示它：

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

演示：http://jsfiddle.net/ambigously/jRVxe/

我假设你的 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 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 3

首先，您必须为其保留一些映射，例如保留用于列出 div 的 ID，并在单击包含该 id 的链接时调用函数。

<前><代码>>

>

> 链接
>

>

>

>
• 清单 1

>

• 清单 2

>

• 清单 3

>

>

否则你会很困惑