Jquery：如何仅访问表中的指定 div答案

【问题标题】：Jquery: how to access only a specified div inside a tableJquery：如何仅访问表中的指定 div
【发布时间】：2011-07-02 14:20:21
【问题描述】：

我在使用 Jquery 的表中一次只能隐藏/显示 1 个 div 时遇到问题。我在一个表中有 2 行：第一行包含一个链接，该链接将在第二行内切换一个 div (.displayMail)。这些行有很多实例，所以当我点击链接时，它应该只更新它下面的下一个 div，但它会更新所有 div !!??有人愿意帮助菜鸟吗？

这是我的表格，由 php 使用 while 循环生成，其中行数根据 ttl 变化。行数。

<table id="inboxTable" class="txt13" width="800px">
<tr><th style="text-decoration:underline">From</th><td width="20px"></td><th style="text-decoration:underline">Subject
    </th><td width="20px"></td>
    <th style="text-decoration:underline">Date</th><td width="20px"></td>
    <th style="text-decoration:underline">Action</th></tr>';

while($info=mysql_fetch_array($result)){
    $this->requestsMail .='
    <tr>
    <td width="100px"><a href="#" class="showMail" onClick="viewMail()">read</a></td></tr>
    <tr><td colspan="7"><div class="displayMail" style="margin:10px 120px 10px 120px" onClick="viewMail()">View Message</div></td></tr>
    ';
}

      $this->requestsMail .='</table>

在 Jquery 中，我有这个：

    function viewMail(){
    $("a.showMail").click(function() {
        $(".displayMail").toggle(); 
        return false;
    });}

我可以获得更新所有 div 的链接，但我只想更新相应的 div。我通过使用next（），children（），parents（）尝试了很多访问（“.displayMail”）的组合......基本上所有东西，但是当我点击相应的时候我仍然无法得到它。这么多小时试图让这个工作:(

【问题讨论】：

我能问一下为什么你将click() 处理程序放在一个你调用onClick() 处理程序的函数中吗？这有点多余，你不是说吗？

标签： php javascript jquery loops while-loop

【解决方案1】：

你需要应用一些 DOM 遍历。

function viewMail(){
    $("a.showMail").click(function() {
        $(this).closest('tr').next().find('.displayMail').toggle();
        return false;
    });
}

只要选择.displayMail，jQuery 就会正确查询所有这些 div。通过调用.closest('tr')^help，我们遍历DOM 直到<tr> 的第一个实例。从那里我们转到下一个<tr> 调用.next()^help，最后使用.find()^help 在该节点搜索.displayMail 的正确实例。

更新

我刚刚意识到你的调用约定。通过在onclick 处理程序中调用viewMail，您将每次绑定另一个单击处理程序。所以应该打电话：

$(function() {
    $("a.showMail").click(function() {
         $(this).closest('tr').next().find('.displayMail').toggle();
         return false;
   });
});

这将绑定一次点击事件处理程序。删除onclick 属性。

【讨论】：

你真棒 jAndy！我应该在几个小时前发布，哈哈。非常感谢！也很好的解释。所以 next() 只能作为对指定的前一个元素的引用 (closest(tr)) 对吗？
@Anriëtte：什么都没有。没关系，这看起来像是一个downvote的事情。无论如何你是对的，我没有意识到 OP 是如何调用这个方法的。
@jAndy：如果你仔细观察，你会发现他正在从onClick 处理程序调用viewMail() <div> 以及：<div class="displayMail" style="margin:10px 120px 10px 120px" onClick="viewMail()">，因此我的回答如下。跨度>
你们都很棒。感谢所有的帮助。我接受了您的建议并删除了 onClick 属性。现在像魅力一样工作！ :)

【解决方案2】：

function viewMail(){
    $("a.showMail").click(function() {
        $(this).parent('tr').next().find(".displayMail").toggle(); 
        return false;
    });
}

【讨论】：

.parent() 只移动一个级别，即<td> 节点。

【解决方案3】：

我将删除 viewMail() 函数并将 jQuery 更改为：

$("a.showMail").click(function() {
    $(this).closest('tr').next().find('.displayMail').toggle();
    return false;
});

$("div.displayMail").click(function() {
    $(this).toggle();
    return false;
});

【讨论】：