开发者

jquery searching thru multiple divs

I'm trying to make a sliding table with jquery, but because jquery sliding doesn't work too good with tables I have to wrap the content in divs

I've already tried to write something like:

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

but it doesn't work

Here's a part of my table structure (there are more theads and tbodys):

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

  开发者_Python百科                                </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>


I am not 100% sure of what exactly you try to achieve, but here's at least something to work with:

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

This goes up in the DOM starting at 'this' (ie your headhook) until the first 'table' item. From there it finds all div.bodyhook elements (inside that table) and performs slideToggle.

[EDIT] You could do this:

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

It works in 1.3.2. It's a little 'dirty', definitely a workaround, but as long as the 'DOM-distance' between your bodyhead and table stay the same, you are fine.

[EDIT] (Regarding your comment) I can think of two approaches:

1) 'hide' when another is opened:

$( 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) 'hide'when mouse leaves

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);
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜