Question

我正尝试使用以下结构从$('.sent_comment_action')前往.message_to_comment元素：

<div class="replay_comment_container">
    <input type="hidden" class="message_to_comment" name="message_to_comment" value="1234" />
    <a class="new_comment_action" href="#">Add Comment</a>
    <div class="comment_form">
        <form>
            <textarea class="comment_field" name="comment_body"></textarea>
            <input class="sent_comment_action" type="submit" value="Send" />
            <div class="error"></div>
        </form>
    </div>                    
</div>

仅仅因为标记可以在同一页面中重复，所以不应该得到要评论的消息的ID，如下所示：

var message_id = $('.message_to_comment').val();

由于我$('.sent_comment_action')作为将被评论的消息的上下文，我可以使用：

//button in question
var message_id = button.parent().parent()... find('.message_to_comment').val();

但我不喜欢有一千个parent（）函数的想法。所以，我的第二次尝试是使用closest()函数，如下所示：

var message_id = button.closest('.message_to_comment').val();

当我测试上面的代码时，看起来永远找不到元素.message_to_comment，因为它返回“undefined”。所以，请指导正确的方向，以便使用parent（）函数获得更好的解决方案（如果存在另一种方式）

Answer 1

类message_to_comment的输入不是按钮的父级。

似乎你可以使用

button.closest('replay_comment_container').find('.message_to_comment').val();

Answer 2

这就是你要找的东西，你想找一个不是按钮父级的元素，它实际上是最接近的.comment_form的兄弟姐妹

button.closest('.replay_comment_container').children('.message_to_comment').val();

您也可以尝试

button.closest('.comment_form').prevAll('.message_to_comment').val();

Answer 3

如何使用while循环：

function getValue(element) 
{
   var parent = element;

   do 
   {
      parent = parent.parent();
      element = parent.find('.message_to_comment');
   }
   while (!element && parent)

   return element ? element.val() : null;
}

然后你可以使用：

var myValue = getValue(valbutton);

Answer 4

简单地回答你的问题，.prev（）; ：对于前一个元素是您要查找的方法。但我建议这样做一点点改变你的代码，以便更容易使用jQuery选择器找到元素。

<div class="replay_comment_container">
<a class="new_comment_action" href="#">Add Comment</a>
<div class="comment_form">
    <form name="form1" method="POST">
        <input type="hidden" class="message_to_comment" name="message_to_comment" value="1234" />
        <textarea class="comment_field" name="comment_body"></textarea>
        <input class="sent_comment_action" type="submit" value="Send" />
        <div class="error"></div>
    </form>
</div>                    
</div>

现在为您的jQuery选择器

$('.send_comment_action').click(function(){
    /*prevent form submitting */
    event.preventDefault();
    /* selector for multiple .replay_comment_container's */
    var value = $(this).prev().prev().val();
    /*a prev method I haven't tried but i believe is the best and correct method */
    var value = $(this).prev('.message_to_send').val();
    /* selector for single .replay_comment_container */
    var value = $('input[name="message_to_comment"]','.replay_comment_container').val();
});

如何避免使用parent（）函数

4 个答案: