我试图找出哪种方法是将数据从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');
});
答案 0 :(得分:3)
你应该这样做:
$(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 :(得分:1)
或许这样的事情?
$(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这是检索线程负载的最快方法你应该是好的。我没有测试过这个。