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中，我有所有选择了选项的li＆gt; 0.在第二个列表中，我选择了所有选项== 0。

我可以在列表中添加更多项目，按下弹出fancybox的按钮，询问我新项目的新名称和所选选项的值。在将新项目包含到数据库之后，我需要将新项目附加到正确的列表中。

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

}）;

Answer 2

它会像你说的那样追加。在id为“#invlist”的ul中。

如果你想更加具体地追加它，我认为你需要查看数据是什么，并在将其附加到某个地方之前将其转换为结构。

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

2 个答案: