Jquery $ (this), .children, .siblings и т. Д.

Im пытается выяснить, какой из лучших методов для отправки данных из запроса получения в div. Проблема, которая меня смущает, заключается в том, чтобы отправить ее только в div, который относится к тому, кто вызывает действие. Поэтому, когда я нажимаю на message_tab, я хочу отправить данные из запроса get в thread_load. однако thread_load не является прямым потомком message_tab, но является дочерним элементом message_flyout. Как я могу заставить это отправить данные только в thread_load sibling? Вот что у меня есть:

Сообщения_tab и message_flyout являются частью прилагаемого сообщения_блока.

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

источник

2015-11-09 Ricki Moore

Вы должны сделать:

$(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 траверсы вверх и возвращают первую найденную Ele Мент. В то время как .find пересекается внутри узла, давая весь соответствующий элемент.

Примечание:

И вы не должны использовать value в качестве атрибута для div, он не действует штуковина. Всегда используйте data-whatever и извлеките его, используя .data('whatever') или .attr('data-whatever').

источник

2015-11-09 10:44:43 void

Что-то вроде этого возможно?

$(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 который является самым быстрым способом получить нагрузку нити вы должны быть хорошо. Однако я не тестировал это.

источник

2015-11-09 10:46:05

Jquery $ (this), .children, .siblings и т. Д.

ответ

Смежные вопросы