Question

我试图找出哪种方法是将数据从get请求发送到div的最佳方法。令我困惑的问题是只将它发送给与调用动作的div相关的div。因此，当我单击message_tab时，我想将get请求中的数据发送到thread_load。但是，thread_load不是message_tab的直接后代，而是message_flyout的兄弟。我如何才能将数据仅发送给兄弟的thread_load？这就是我所拥有的：

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

HTML

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')
获取。{/ 1}

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 flyout直接来自.message_tab，所以如果我们移动到那个元素然后使用.find这是检索线程负载的最快方法你应该是好的。我没有测试过这个。

Jquery $（this），。children，.siblings等

2 个答案: