Jquery $(this)、.children、.siblings等

Question

我试图找出哪种方法是将数据从get请求发送到div的最佳方法。让我困惑的问题是，只将它发送给一个相对于调用该操作的div。因此，当我单击message_tab时，我希望将数据从get请求发送到thread_load。然而，thread_load并不是message_tab的直接后代，而是message_flyout的同辈。如何才能将数据仅发送到兄弟姐妹的thread_load？以下是我所拥有的：

message_tab和message_flyout都是附加的message_block的一部分。

var el = $(
            '<div class = "message_block">'+
                '<div class = "message_tab" value = '+ user_id +' >'+ '</div>' +

                '<div class = "message_flyout">' +
                    '<div class = "message_content">' +
                        '<div class = "message_header">'+ '</div>' +
                            '<div class = "conversation_scroll">' +
                                '<div class = "scroll_content">' +
                                    '<ul class = "thread_load">'+ '</ul>'+
                                '</div>' +
                            '</div>' +
                                    '<div class = "message_form">' +
                                        "<form class = 'myForm' action='"+'http://localhost:8000/newMsg/'+user_id+"' method= 'POST' accept-charset= 'UTF-8'>" + "<input name='_token' type='hidden' value='lbaqsTEePfIMYguGnsMvEDt8ExHly3dLKHtAu18c'>" +
                                        '<div class = "message_form">' +
                                            "<input class='input-mini' placeholder='Type a message...' name='body' type='text'>" +
                                        '</div>'+
                                        "</form>" +
                                    '</div>'+
                                '</div>'+
                            '</div>'+
                    '</div>');

Javascript:

    $(document).on('click', '.message_tab', function(){
    var user_id = $(this).attr('value');
        var elem_data = $(this).siblings('.message_flyout');
            var data_transfer = $(elem_data).children('.thread_load');
    console.log(data_transfer);
    base_url = 'http://localhost:8000/thread';
        $.get(base_url + '/' + user_id , function (data) {
            $(data_transfer).closest('.thread_load').html(data);
        });
        $(this).siblings('.message_flyout').toggle();
    $(this).parent('.message_block').css('width', '258px');
});

Answer 1

你应该这样做：

$(document).on('click', '.message_tab', function () {
    var user_id = $(this).attr('value');
    var elem_data = $(this).siblings('.message_flyout').find('.thread_load');
    console.log(data_transfer);
    base_url = 'http://localhost:8000/thread';
    $.get(base_url + '/' + user_id, function (data) {
        elem_data.html(data);
    });
    $(this).siblings('.message_flyout').toggle();
    $(this).parent('.message_block').css('width', '258px');
});

.closest向上遍历并返回第一个匹配元素。然而，.find在节点内部遍历，给出所有匹配的元素。

注：

而且您不应该使用value作为div的属性，它是无效的。始终使用data-whatever并使用.data('whatever')或.attr('data-whatever')获取它。

Answer 2

也许是这样的？

$(document).on('click', '.message_tab', function(){

    var user_id = $(this).attr('value');
    var data_transfer = $(elem_data).children('.thread_load');
    var base_url = 'http://localhost:8000/thread';

    // Target thread load here
    var $thread_load =  $(this).next('.message_flyout').find('ul.thread_load');

    $.get(base_url + '/' + user_id , function (data) {
        $thread_load.html(data);
    });

    $(this).siblings('.message_flyout').toggle();
    $(this).parent('.message_block').css('width', '258px');
});

.message跳出直接出现在.message_tab之后，所以如果我们移到该元素，那么使用.find --这是检索线程负载的最快方法--您应该是很好的。不过，我还没有测试过这个。