Question

我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>

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

ajax响应与上述DOM相同，但id的{{1}}和div的内容除外。 anchor tag将是id或level-2 i，e。 level-3到div的当前值。

Answer 1

尝试

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

});

Answer 2

你可以像这样添加父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>

在jquery中执行此操作后

$("a").on("click",function(){
    // on ajax success
    $(this).parent("#levels").append("whatever you want!");

});

Answer 3

您的选择器内部存在一些语法错误，并尝试在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)
        },
    }); 
});

Answer 4

对于ajax响应，您可以将附加函数添加到请求的响应中，例如：（伪代码）

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

如果从具有多行的ajax请求中获取数组 - 您可以遍历每一行并使用.append（）jquery函数将新的html追加到当前div。

http://api.jquery.com/append/

Answer 5

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

        }
    });
});

如何将ajax html响应附加到当前div旁边

5 个答案: