如何用 jquery 替换一个列表项答案

【问题标题】：how to replace one list item with another with jquery如何用 jquery 替换一个列表项
【发布时间】：2013-08-08 06:20:38
【问题描述】：

我有以下表格列表：

<ul class="form-list">
<li>
     <div class="my-display">
          <h1>form 1</h1>
          <form method="POST" action="" id="my-form">
               <button id="button_id" type="submit" class="btn" >Submit</button>
          </form>
     </div>
</li>
<li>
     <div class="my-display">
          <h1>form 2</h1>
          <form method="POST" action="">
               <button id="button_id" type="submit" class="btn" >Submit</button>
          </form>
     </div>
</li>
</ul>

我动态创建列表项并使用 ajax 返回它们。我想单击按钮并将列表项替换为使用 ajax 返回的新列表项。

类似这样的：

$(document).ready(function() {
            $('.form-list').on('submit', '#my-form', function (e) {

                var id = $(this).attr('name');
                getListItem(getListItemCallback, id); 

                return false;
            });

          });


getListItem(callback, id){          
    $.get(url, function(result) {                    
        callback(result);
        return false;

        });
 }

getListItemCallback:function(result){

 }

我怎样才能做到这一点？

【问题讨论】：

您在result 变量中实际得到了什么，HTML 标记<li>Some list-item content</li> 或只是一个字符串Some list-item content，需要包装在li 中，然后用于替换当前li?
使用.replaceWith()
ok 添加了更多我正在使用的表单
我得到了上面每个
list item

<html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.btn').click(function() { my_butt = $(this).attr('id'); my_div = $(this).parent().attr('id'); //alert('Button: ' +my_butt+ ' DIV: ' + my_div); $.ajax({ type: "POST", url: "your_php_file.php", data: 'myDiv=' +my_div+ '&theButton=' +my_butt, success: function(whatigot) { alert('Server-side response: ' + whatigot); //$("'#" +my_div+ "'").html(whatigot); $("#"+my_div).html(whatigot); } //END success fn }); //END $.ajax }); //END btn class click }); //END $(document).ready() </script> </head> <body> <ul class="form-list"> <li> <div id="li-1" class="my-display"> <h1>form 1</h1> <button id="button_id-1" type="submit" class="btn" >Submit</button> </div> </li> <li> <div id="li-2" class="my-display"> <h1>form 2</h1> <button id="button_id-2" type="submit" class="btn" >Submit</button> </div> </li> </ul> </body> </html>