javascript - jQuery Ajax 如何告诉 jquery 在哪里附加从 Ajax 调用返回的 html 数据

Question

我有两个具有相同结构的 ul 列表:

<ul id="list1">
    <li id="inv-1">
        <label>Item name</label>
        <select>
           <option selected="selected"> value="1">Value 1</option>
        </select>
    </li>
    //...
    <li id="inv-2">
        <label>Item name</label>
        <select>
           <option selected="selected"> value="1">Value 1</option>
        </select>
    </li>
 </ul>
<ul id="list2">
    <li id="inv-44">
        <label>Item name</label>
        <select>
           <option selected="selected"> value="0">Value 0</option>
        </select>
    </li>
    //...
    <li id="inv-55">
        <label>Item name</label>
        <select>
           <option selected="selected"> value="0">Value 0</option>
        </select>
    </li>
 </ul>

它们看起来相同但具有不同的 id。在列表 1 中，我拥有所有选择了选项 > 0 的 li。在第二个列表中，我拥有所有选择了选项 == 0 的 li。

我可以将更多项目添加到列表中，按下一个按钮，弹出一个花式框，询问我新项目的新名称和所选选项的值。我需要将新的 li 项目添加到数据库中后添加到正确的列表中。

我的 jQuery 函数是这样的:

$(".btn.invi").fancybox({
  afterClose : function() {
    var nombre=$('#addinvi').val();
    $.ajax({
    type: "POST",
    url: "ajax-invi.php",
    dataType: "html",
    data: "id="+idboda+"&name="+name+"&value="+value",
    success: function(data) {
      $('ul#list1').append(data);//How do I know where to append??
    }
    }); 
  }
});

如何根据所选选项的值告诉成功函数追加到何处？

现在从ajax-invi.php返回的数据是这样的(用php将值设置到mysql数据库之后)

    <li id="inv-22">
        <label>Item name</label>
        <select>
           <option selected="selected"> value="1">Value 1</option>
        </select>
    </li>

Answer 1

ID 在页面中是唯一的。您有 2 个具有相同 ID 的列表项。

<ul id="list1">
<li id="inv-1">
    <label>Item name</label>
    <select>
       <option selected="selected"> value="1">Value 1</option>
    </select>
</li>
//...
<li id="inv-2"> //Note the change in ID
    <label>Item name</label>
    <select>
       <option selected="selected"> value="1">Value 1</option>
    </select>
</li>

完成此更改后，将在您的成功函数中

$(".btn.invi").fancybox({
    afterClose : function() {
    var nombre=$('#addinvi').val();
    $.ajax({
        type: "POST",
        url: "ajax-invi.php",
        dataType: "html",
        data: "id="+idboda+"&name="+name+"&value="+value,
        success: function(data) {
            //perfom your tests here
            //based on your result do either of the following
            $('ul#invlist').find('#inv-1').append(data);
            $('ul#invlist').find('#inv-2').append(data);
        }
     }); 

});