jquery - jQuery中的动态div

Question

我需要为每个提交按钮创建一个唯一的 div 和一个唯一的名称-我是 jQuery 新手-请帮助我。

$(document).ready( function() {  
    done();
});

function done() {
    setTimeout( function() {
        updates();
        done();
    }, 200);
}

function updates() {
    $.getJSON("fetch.php", function(data) {
        $("ul").empty();
        $.each(data.result, function(){
            $("ul").append("<li>Item: "+this['item']+
               "</li><li>Price: "+this['price']+"<br />")

            $("ul").append("<div id='a'><input type='submit' 
                 style='position:relative;top:100px;'>" + "<br /></div>" )

        });

    });
}

Answer 1

您可以使用当前日期时间为 id 生成唯一的后缀

function generateRandomSuffix() {
    return (new Date()).getMilliseconds().toString()
}

然后添加到你的id

$("ul").append("<div id='a" + generateRandomSuffix() +"'><input type='submit' style='position:relative;top:100px;'>" + "<br /></div>" )

Answer 2

您可以创建一个计数器，并在每次迭代 div id 时，将计数器值附加到标签的相关元素。只需确保在您最后一次使用计数器时递增计数器。一个快速的伪代码示例：

$counter = 0;
$("ul").append("/<div id='a"+$counter+"'><input type='submit' id='submit"+($counter++)+" style...

Answer 3

在您的情况下，最好使用，setInterval而不是setTimeout，您可以执行以下操作：

$(document).ready(function () {
        setInterval(function () { updates() }, 200);
    });

var curid = 0;
function updates() {
    $.getJSON("fetch.php", function (data) {
        var html = '<ul>';
        $.each(data.result, function () {
            html += "<li>Item: " + this['item'] + "</li><li>Price: " + this['price'] + "<br />";
            html += "<input type='submit' style='position:relative;top:100px;'>" + "<br />";
        });
        html +='</ul>';

        curid += 1;
        var box = document.createElement("div");
        box.id = "div" + curid;
        box.className = "myclass";
        document.body.appendChild(box);
        box.innerHTML(html);
    });
}

Answer 4

尝试

var counter = 0;
function updates() {
    var $ul = $('ul');
    $.getJSON("fetch.php", function(data) {
        $ul.empty();
        $.each(data.result, function(){
            counter++;

            var $li = $('<li />');
            $li.append("<li>Item: "+this['item'] + '<br />');
            $li.append("Price: "+this['price'] + '<br />');

            $('<div />', {
                id: counter
            }).append('<input type="submit" style="position:relative;top:100px;"/>').a[appendTo($li)

            $ul.append($li)

        });

    });
}