如何使用jquery对PHP循环结果执行操作

我已经搜索过了，但似乎无法理解我找到的答案。感谢任何帮助!!

目标:在section#info中列出的消息头下面的section#details中显示选定消息的详细信息。

问题:

1. 下面的代码警告一个结果，但不会fadeIn();，(或show();，或…任何)。
下面的代码只抓取PHP while循环中最后一个结果的值。

php/html/jquery javascript:

        <section id="info">
            <?php
                $user = $session->username;
                $q = sprintf("SELECT * FROM mail WHERE UserTo = '%s' ORDER BY SentDate DESC",
                      mysql_real_escape_string($user));
                $getMail = mysql_query($q, $link) or die(mysql_error());
                if(mysql_num_rows($getMail) == 0) {
                    echo "<p>you have no mail</p>";
                }
                else {
                ?>
            <form id="inbox" class="mail">
                <fieldset>
                    <ul>
                        <li style="border: 2px solid purple; width: 100%;">
                            <span style="display: inline-block; border: 1px solid black; width: 8%; margin-left: 13%;">Status</span>
                            <span style="display: inline-block; border: 1px solid black; width: 15%;">From</span>
                            <span style="display: inline-block; border: 1px solid black; width: 45%;">Subject</span>
                            <span style="display: inline-block; border: 1px solid black; width: 16%;">Time</span>
                        </li>
                <?php
                        while($mail = mysql_fetch_object($getMail)) {
                            $status         =       $mail->status;
                            $mailId     =       $mail->mail_id;
                            $from           =       $mail->UserFrom;
                            $subject        =       $mail->Subject;
                            $received       =       $mail->SentDate;
                            $theMessage     =       $mail->Message;
                        ?>
                        <li class="outerDiv" style="border: 2px dotted purple;">
                            <button style="display: inline;" class="viewButton">View</button>
                            <button style="display: inline;">Delete</button>
                            <?php
                            echo "<span style='border: 1px solid red;'>" . $mail_id . "</span>";
                            echo "<span style='display: inline-block; width: 8%; border: 1px solid red;'>" . $status . "</span>";
                            echo "<span style='display: inline-block; width: 15%; border: 1px solid red;'>" . $from . "</span>";
                            echo "<span style='display: inline-block; width: 45%; border: 1px solid red;'>" . $subject . "</span>";
                            echo "<span style='display: inline-block; font-size: x-small; width: 17%; border: 1px solid red;'>" . $received . "</span>";                    
                            ?>
                        </li>
                <?php   }
                    } ?>
                    </ul>
                </fieldset>
            </form>
        </section>
        <section id="details">
            <div class="theMessage" style="display: none;"><?php echo $theMessage; ?></div>
            <script type="text/javascript">
                $(document).ready(function() {
                    $(".outerDiv").click(function(e) {
                        if($(e.target).is(".viewButton")) {
                    alert($(document).find(".theMessage").text()); //this works
                   $(document).find(".theMessage").text().fadeIn(1000); //this doesn't work
                   var theMessage = $(document).find(".theMessage").text();
                   theMessage.fadeIn(1000); //this doesn't work
                        }
                    });
                    return false; (sometimes prevents default..sometimes not?
                });
            </script>
        </section>

注。疯狂的颜色和边框是临时布局的目的。此外，删除按钮显然会有功能…等我弄明白了。