I am trying to access a div with class="emailSent", but I am not able to reach the div.

Here is the HTLML code generated with a while loop in php:

    <tr><td>TR 1</td></tr><tr>
    <td colspan="7">
        <div class="replyDiv" align="center" style="display:none; margin:10px 60px 10px 10px;">

            <form width="350px" id="userReplyForm" name="userReplyForm" method="post" action="#">
            <input type="hidden" id="date" name="date" value="'.time().'"/>
            <input type="hidden" id="sender" name="sender" value="'.$username.'"/>
            <input type="hidden" id="recipient" name="recipient" value="'.$sender.'"/>
            <table align="center" width="350px" class="smallTxt userDetails">
                <tr>
                    <td align="left" width="350px"><input type="text" id="subject" name="subject" size=30 value="RE:'.$subject.'"/></td></tr>
                <tr>
                    <td width="350px"><textarea rows="6" cols="42" id="message" name="message"></textarea></td></tr>
                <tr>
                    <td align="center"><input type="submit" name="Submit" class="submitBtnSmallLong" value="Send Reply"/></td></tr>
            </table>
            </form>

        </div>
        <div class="emailSent" align="center" style=" margin:10px 60px 10px 10px; color:blue; font-size:18px;">
        </div>
    </td>
</tr>

So what I have is 2 rows of tables being generated for every record. How can I access ONLY the corresponding divs for that record (I don't want to update all divs in rows, just that one being worked on): 1.) div with class "replyDiv" ?? 2.) div with class "emailSent" ??

I ve tried accessing the divs directly with $(".replyDiv").hide(); but its not working.

Ok, here is the jQuery part:

    $(function(){//getUserReply, send to process.php
        $("form").submit(function(){
            var dataString = $(this).serialize();
            var message = $(this).find("#message").val();

        if(message==""){alert("Please enter your message");
            }else{
            $.ajax({
                type: "POST",
                url:  "process.php",
                action: "submitForm",
                data: dataString,
                dataType: "JSON",
                cache: false,
                success: function(data){
                    if(data == "true"){//hide replyDiv and show emailSent div
                        $("form").closest("tr").find(".emailSent").append("hello"); //t开发者_运维百科his line appends hello to all the .emailSent divs. Remember, I have many rows so only want this particular div being shown.                      
                        return false;
                    }

                }
            });

        }
            return false;
        });
    });

Look at your code, you are defining it as a class not as a id

<div class="emailSent" align="center" style=" margin:10px 60px 10px 10px; color:blue;   font-size:18px;">
    </div>

need to change class to id

<div id="emailSent" align="center" style=" margin:10px 60px 10px 10px; color:blue; font-size:18px;">
    </div>

Update:

Here is a version of your code that should work (basically it is just applying what I wrote below, I also restructured it a bit):

$("form").submit(function(e){
    e.preventDefault(); // <- better than `return false`

    // get reference to elements:
    var $replyDiv = $(this).parent();
    var $emailSent = $(this).parent().next();
    // or
    // var $emailSent = $(this).closest('td').find('.emailSent');

    // you should give the form elements classes!
    if(!$(this).find("#message").val()){
        $.ajax({
           type: "POST",
           url:  "process.php", // `action` does not exist as option
           data:  $(this).serialize(),
           dataType: "JSON",
           cache: false,
           success: function(data){
              if(data == "true"){//hide replyDiv and show emailSent div
                $replyDiv.hide();
                $emailSent.append('hello').show();                   
              }
           }
        });
    }
    else {
        alert("Please enter your message");
    }
});

Based on your last comment, I assume you are going to send the form data to the server via an Ajax request and you want to access some specific information in the success callback.

$('.replyDiv form').submit(function(e) {
    e.preventDefault();

    //                form           emailSent
    //                  v               v
    var $emailSent = $(this).parent().next();
    //                         ^
    //                     replyDiv

    $.ajax({
        //...
        success: function() {
            // here you want the reference
            $emailSent.text('Worked!');
        }
    });
});

Btw. if you really have multiple of these rows, then you must not give the form elements IDs.