Javascript Jquery$（this）、.children、.bird等

我试图找出从get请求向div发送数据的最佳方法。让我困惑的问题是，只将数据发送到与调用操作的div相关的div。因此，当我单击message_选项卡时，我想将数据从get请求发送到线程加载。但是，线程\u加载不是消息\u选项卡的直接后代，而是消息\u弹出按钮的同级。我如何才能让它只将数据发送到同级的线程加载？以下是我所拥有的：

message_选项卡和message_弹出按钮都是附加message_块的一部分

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>');

你应该做：

$(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

遍历节点内部，给出所有匹配元素

注意：

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

您不应该将

值

用作

div

的属性，它是无效的。始终使用

data which

并使用

.data（'which'）

或

.attr（'data-which'）

获取数据。您应该执行以下操作：

$(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

遍历节点内部，给出所有匹配元素

注意：

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

---

您不应该将

值

用作

div

的属性，它是无效的。始终使用

data which

并使用

.data（'which'）

或

.attr（'data-which'）

之类的方法获取它，也许

$(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_选项卡之后，因此如果我们移动到该元素，则使用.find这是检索线程加载的最快方法，您应该会很好。不过，我还没有测试过这个。

也许是类似的东西

$(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_选项卡之后，因此如果我们移动到该元素，则使用.find这是检索线程加载的最快方法，您应该会很好。但是我还没有测试过这个