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

Answer 3

首先，你必须为它保留一些映射，例如为列出div保留一个ID，并在点击包含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>

否则你会很困惑

jquery找到元素一个元素

3 个答案: