Jquery: как получить доступ только к указанному div внутри таблицы

Question

У меня проблемы с сокрытием / показом ТОЛЬКО 1 деления за раз внутри таблицы с Jquery.У меня есть 2 строки в таблице: 1-я строка содержит ссылку, которая будет переключать div (.displayMail) во второй строке.Есть много экземпляров этих строк, поэтому, когда я нажимаю на ссылку, она должна обновлять только следующий следующий div, но обновляет все div !!Кто-нибудь хочет помочь noob?

Вот моя таблица, созданная с помощью цикла while по php, в котором количество строк изменяется в зависимости от 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.Я пробовал так много комбинаций доступа (".displayMail"), используя next (), children (), parent () ... в основном все, но все равно не могу получить его там, где я нажимаю на соответствующий.Так много часов, пытаясь заставить это работать: (

Answer 1

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

Answer 2

Я бы удалил функцию viewMail() и изменил бы jQuery на это:

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

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

Answer 3

Вам необходимо применить обход DOM.

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

Просто выбрав .displayMail, jQuery правильно запросит все этих дивов. Вызывая .closest('tr') ^help , мы проходим DOM вплоть до самого первого экземпляра <tr>. Оттуда мы идем к следующему <tr>, вызывающему .next() ^help и, наконец, ищем этот узел с помощью .find() ^help для правильный экземпляр .displayMail.

обновление

Я только что понял ваше соглашение о вызовах. Вызвав viewMail в обработчике onclick, вы каждый раз будете связывать другой обработчик кликов. Так что стоит просто позвонить:

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

Это связывает обработчик события click один раз. Удалите атрибут onclick.