Jquery: доступ к элементу

Question

Я пытаюсь получить доступ к div с помощью class = "emailSent", но не могу связаться с div.

Вот код HTLML, сгенерированный с помощью цикла while в 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>

Итак, у меня есть 2 строки таблиц, генерируемых для каждой записи.Как я могу получить доступ ТОЛЬКО к соответствующим элементам div для этой записи (я не хочу обновлять все элементы div в строках, только над тем, над которым ведется работа): 1.) div с классом "replyDiv" ??2.) div с классом "emailSent" ??

Я пытался получить доступ к div напрямую с помощью $ (". ReplyDiv"). Hide ();но это не работает.

Хорошо, вот часть jQuery:

    $(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"); //this 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;
        });
    });

Answer 1

Посмотрите на ваш код, вы определяете его как класс, а не как идентификатор

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

необходимо изменить класс на id

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

Answer 2

Обновление:

Вот версия вашего кода, которая должна работать (в основном это просто применение того, что я написал ниже, я также немного реструктурировал):

$("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");
    }
});

---

Исходя из вашего последнего комментария, я предполагаю, что вы собираетесь отправить данные формы на сервер с помощью Ajax-запроса и хотите получить доступ к определенной информации в обратном вызове success.

$('.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. если у вас действительно есть несколько таких строк, вы не должны указывать идентификаторы элементов формы.