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);
});
精彩评论