jQuery 如何将ajax html响应附加到当前div的旁边
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16252022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to append ajax html response to next to current div
提问by Mahesh.D
I've DOMas follows,
我DOM如下，
<div id='level-1'>
<ul>
<li><span><a>Mike</a></span></li>
<li><span><a>John</a></span></li>
<li><span><a>Ket</a></span></li>
</ul>
</div>
and jQueryis as follows,
并且jQuery是如下，
$(document).on('click','div[id^=[level] ul li span a',function(){
//Making ajax request,no problem in getting the response
// Here I need to append response next to the current div i,e div#level-1 or div#leve-2
});
ajaxresponse will be same as above DOMexcept idof the divand content of anchor tag. idwill be level-2or level-3i,e. +1to current value of the div.
ajax响应将与上述相同，DOM除了id的div和 内容anchor tag。id将是level-2或level-3我，例如。+1到 div 的当前值。
回答by Yury Tarabanko
Try
尝试
$(document).on('click','div[id^=level] ul li span a',function(){
var parentDiv = $(this).closest("div[id^=level]");
$.ajax(...).done(function(html) {
parentDiv.after(html);
});
});
回答by jeremy castelli
Can you add parent div like this?
你能像这样添加父div吗？
<div id="levels">
<div id='level-1'>
<ul>
<li><span><a>Mike</a></span></li>
<li><span><a>John</a></span></li>
<li><span><a>Ket</a></span></li>
</ul>
</div>
</div>
after you can do this in jquery
在您可以在 jquery 中执行此操作之后
$("a").on("click",function(){
// on ajax success
$(this).parent("#levels").append("whatever you want!");
});
回答by Pradeep .a
$('.submit').click(function() {
var html='';
$.ajax({
dataType: "json",
url: "http://www.yoururl.com/",
success: function (data) {
var content = 'Title : '+data.Title ;
content += ' Year : '+data.Year ;
content += ' Rated : '+data.Rated ;
content += ' Released : '+data.Released ;
$("#text").append(content);
}
});
});
回答by Eli
You have a bit of syntax error inside your selector, as well as try to append responseto your div in successcallback:
您的选择器中有一些语法错误，并尝试response在success回调中附加到您的 div ：
$(document).on('click','div[id^="level"] ul li span a',function(){
var $this = $(this);
$.ajax({
...........
success: function(response){
$this.closest('div[id^=level]').append(response)
},
});
});
回答by Mupps
For an ajax response you can add your append function to the response of the request e.g: (psuedo code)
对于 ajax 响应，您可以将 append 函数添加到请求的响应中，例如：（伪代码）
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
//add response functionality here e.g
if(var i; i < response.length; i++) {
$('#level-'+(i+1)).append('<div id=level-'+(i+1)+' some new data </div>');
}
});
if you get an array from the ajax request that has multiple rows - you can loop through each row and append the new html to the current div with the .append() jquery function.
如果您从具有多行的 ajax 请求中获得一个数组 - 您可以遍历每一行并使用 .append() jquery 函数将新的 html 附加到当前 div。
