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

Question

我有以下的DOM:

我有以下的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相同，除了div的id和锚标签的内容。 id将是level-2或level-3，即当前

的值加1。

- Mahesh.D

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

});

- Yury Tarabanko

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!");

});

- jeremy castelli

---

Jeremy，我可以添加新元素，但是我不想使用点击事件。谢谢。 - Europeuser

@Europeuser，这是一个问题吗？ 如果您不想使用点击部分，您可以在任何地方仅使用此部分：$(this).parent("#levels").append("无论您想要的内容！"); - jeremy castelli

Answer 3

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

        }
    });
});

- Pradeep .a

Answer 4

你的选择器里有一点语法错误，同时在 success 回调函数中尝试将 response 添加到你的 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)
        },
    }); 
});

- Eli

---

这必须在ajax成功回调函数内发生。 - Yury Tarabanko

没问题 :). 顺便问一下，你需要在闭包中保存 $(this) 吗？ - Yury Tarabanko

Answer 5

对于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追加到当前的

中。

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

- Mupps