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)

        });

    });
}

jQuery中的动态Div

4 个答案: