jquery通过多个div进行搜索

Question

我正尝试用jquery制作一个滑动表，但是因为jquery滑动不能很好地处理表，所以我不得不将内容包装在div中

我已经尝试过写一些类似这样的东西：

    $("div.headhook").mouseenter(function () {
//$(this).parent().next("div.bodyhook").slideToggle("slow");
$(this).closest("div").nextAll("div.bodyhook").slideToggle("fast");
});

但它不起作用

这是我的表结构的一部分(还有更多的thead和tbody)：

     <table id="forum-0" class="forum-table">
                                   <thead class="thead5" style=""><tr id="forum-list-5" class="odd first-row container container-5" >
                        <th colspan="5" class="container">
            <div id="headhook5" class="headhook">
              <div class="forum-details">

                <div class="container_name name">
                  <a href="/forum/5">Forum title</a>
                </div>
                                  <div class="description">Forum description</div>
                              </div>
              </div>
            </th>
                            <tr><td colspan="5" class="container_header"></td></tr>

                      </tr>
          </thead>
        <tbody class="tbody5">

            <tr class="accordion-fix"><td colspan="5" width="940px" height="0" class="accordion-fix"> 
            <div id="bodyhook5" class="bodyhook">
                                <table>
         <tr id="forum-list-11" class="even middle-row in-container-0">

            <td class="forum-icon"> <span id="thmr_23" class="thmr_call">

  <img src="/sites/all/modules/advanced_forum/styles/naked/images/forum-folder.png" alt="folder" title="folder" width="30" height="27" /></span>

 </td>

            <td class="forum-name2">
                              <div class="forum-details">
                  <div class="name"><a href="/forum/11">Forum A</a></div>
                                  </div>
                          </td>

            <td class="topics">
              <div class="num num-topics">
               1              </div>
            </td>

            <td class="num posts">
              2            </td>

            <td class="last-reply">
              <span class="last-reply-timestamp">2010-11-09 11:51</span> <br/>
              <span class="last-reply-name">jan</span>
            </td>
        </tr>
        </table>
                                <table>

         <tr id="forum-list-12" class="odd middle-row in-container-0">

            <td class="forum-icon"> <span id="thmr_24" class="thmr_call">
  <img src="/sites/all/modules/advanced_forum/styles/naked/images/forum-folder.png" alt="folder" title="folder" width="30" height="27" /></span>

 </td>

            <td class="forum-name2">
                              <div class="forum-details">
                  <div class="name"><a href="/forum/12">Forum B</a></div>

                                  </div>
                          </td>

            <td class="topics">
              <div class="num num-topics">
               0              </div>
            </td>

            <td class="num posts">

              0            </td>

            <td class="last-reply">
              <span class="last-reply-timestamp"></span> <br/>
              <span class="last-reply-name"></span>
            </td>
        </tr>
        </table>

                                <table>
         <tr id="forum-list-13" class="even middle-row in-container-0">

            <td class="forum-icon"> <span id="thmr_25" class="thmr_call">
  <img src="/sites/all/modules/advanced_forum/styles/naked/images/forum-folder.png" alt="folder" title="folder" width="30" height="27" /></span>

 </td>

            <td class="forum-name2">
                              <div class="forum-details">

                  <div class="name"><a href="/forum/13">Forum C</a></div>
                                  </div>
                          </td>

            <td class="topics">
              <div class="num num-topics">
               0              </div>
            </td>

            <td class="num posts">
              0            </td>

            <td class="last-reply">
              <span class="last-reply-timestamp"></span> <br/>
              <span class="last-reply-name"></span>
            </td>
        </tr>

        </table>
                                      </div>
          </td></tr>
          </tbody>

Answer 1

我不是百分之百确定你到底想要达到什么目标，但至少有一些东西可以使用：

$(this).parents("table").first().find("div.bodyhook").slideToggle("slow");

这在DOM中从' This‘(即你的头钩)开始上升，直到第一个'table’项。从那里，它找到所有div.bodyhook元素(在该表中)并执行slideToggle。

编辑你可以这样做：

$(this).parent().parent().parent().parent().find("div.bodyhook").slideToggle("slow");

它可以在1.3.2中工作。这有点“脏”，绝对是一个变通办法，但只要你的头部和桌子之间的“DOM距离”保持不变，你就没问题。

EDIT我能想到两种方法：

1)当另一个打开时“隐藏”：

$( function() {
    $("div.bodyhook").hide(); // start all hidden
    $("div.headhook").mouseenter( showthis );
} );

function showthis () {    
    $("div.headhook")
        .not($(this))
        .parent().parent().parent().parent()
        .find("div.bodyhook")
        .slideUp("slow");
    $(this)
        .parent().parent().parent().parent()
        .find("div.bodyhook")
        .slideDown("slow");
}

2)当鼠标离开时“隐藏”

function showthis() {
    $(this)
        .parent().parent().parent().parent()
        .find("div.bodyhook")
        .slideDown("slow");
}

function hidethis() {
    $(this)
        .parent().parent().parent().parent()
        .find("div.bodyhook")
        .slideUp("slow");
}

$(function() {
    $("div.bodyhook").hide(); // start all hidden
    $("div.headhook").mouseenter(showthis);
    $("div.headhook").mouseleave(hidethis);
});