如何在我的JQuery可排序的每个项目上添加“替换”按钮

时间:2013-04-15 03:42:19

标签: jquery jquery-ui jquery-ui-sortable jquery-ui-button

我想知道如何在JQuery可排序的每个项目上放置一个按钮。现在,我在屏幕顶部有一个按钮,可以将自动完成中的用户输入添加到可排序。这是我的.js代码,它为我的sortable添加了新项目:

$(".addButton").click(function(e) {
    e.preventDefault();
    // set var item to be the string inputted by the user
    var item = $("input[name='inputItem']").val(); //where 'inputItem' is the name of the <form> which contains the <input>
    // parses input string, splitting at commas into liArray containing substrings as elements
    var liArray = item.split(", ");
    // for loop to add each brew to the sortable list (length-1 because last element in array is empty string)
    for (var i = 0; i < liArray.length-1; i++) {
        // sets var $li to the string in the ith index of liArray
        var $li = $("<li class='ui-state-default'/>").text(liArray[i]);

        // adds var $li to gui
        $("#sortable").append($li);
    };

    $("#sortable").sort();

    // refreshes the page so var $li shows up
    $("#sortable").sortable("refresh");
});

我的想法是添加类似

的内容
<button>Button!</button> 

到这一行:

var $li = $("<li class='ui-state-default'/>").text(liArray[i]);

但我不知道如何完全实现它。任何帮助,将不胜感激。谢谢!

1 个答案:

答案 0 :(得分:1)

试试这个。

$("<li class='ui-state-default'/>").text(liArray[i]).append('<button>Button!</button>');