Question

我尝试为p个元素提供不同的ID，然后为每个p提供一个内容。这是我以前的一些工作：

while(i<=10){
    $.ajax({    
        url: "tabelle.html",
        success: function(data) {
            $('div').append("<p id='+i+'></p>");
            $('#"+i+"').html(data);
        },
        error: function(){
            alert('nein!');
        },  
    });     
    i++;
}
</script>
</head>
<body>
<div>
<p> </p>
</div>

但它不起作用，任何人都可以帮忙吗？你说我应该更具体，什么不起作用。问题是，它没有做任何事......

Answer 1

您使用的是单引号和双引号，而不是一起使用。

$('div').append("<p id='+i+'></p>");

应该是

$('div').append("<p id="+i+"></p>");

和

$('#"+i+"').html(data);

应该是

$('#'+i).html(data);

此外，元素id不能以数字开头，因此请在前面添加一些文字：

$('#prefix_'+i).html(data);

Answer 2

错误函数作为$ .ajax（）调用中的最后一个参数后跟一个逗号，但之后不会插入其他参数。您可能想要删除该逗号。

此外，根据我的理解，您正在分配数字ID。根据定义，这是不允许的。 ID必须以字母开头。

var id = 0;
for ( var x = 0; x < 10; x++ ){
    $.ajax({    
        url: "tabelle.html",
        success: function(data) {
            $('<p>').attr('id','p'+id).html(data).appendTo($('div'));
            id++;
        },
        error: function(){
            alert('nein!');
        } 
    });
}

我在每个ID的开头添加了“p”。

为了避免相同的ID问题，不需要花哨的代码，只需在循环之前创建一个变量，它将保留已创建ID的轨迹，并在每次创建新元素时递增它。

Answer 3

除了连接问题之外，问题是每个回调都有一个引用到同一i ，并且在执行回调时，循环结束。所有元素都将具有ID 11。

您可能认为每次迭代都会等到Ajax调用返回，但事实并非如此。 Ajax是异步，“周围”代码不等待Ajax调用完成（这就是你必须传递回调的原因）。

另一个问题是JavaScript没有块范围。您可以创建一个新范围并“捕获”i调用函数的值。以下是立即（或自我约束）函数的示例：

while(i<=10) {
    (function(index) {
        $.ajax({    
            url: "tabelle.html",
            success: function(data) {
                $('<p />', {id: 'prefix' + index, html: data})
                 .appendTo('#divId');
            },
            error: function(){
                alert('nein!');
            }
        });
    }(i++));
}

另一种解决方案是将Ajax调用放在命名函数中并从循环中调用它（传递当前索引）：

while(i<=10) {
    makeAjaxCall(i++);
}

在您的特殊情况下，您甚至不需要在循环中发出Ajax请求。您没有向服务器发送任何参数。在这种情况下，您可以在成功回调中迭代：

$.ajax({    
    url: "tabelle.html",
    success: function(data) {
        var $p = $("<p />", {html: data}),
            $div = $('#divId');
            i = 1; //?
        while(i<=10) {
            $div.append($p.clone().attr('id', 'prefix' + i);
        }
    },
    error: function(){
        alert('nein!');
    }
});

尽可能少地提出请求是件好事。另一种选择是将结构化数据作为响应发送（例如JSON ^[Wikipedia]），解析并相应地处理它。

需要考虑的事项：

在HTML4中，不允许ID以数字开头。虽然它很可能适用于所有浏览器，但最好在ID前面添加字符（虽然它在HTML5中有效）。
$('div')会在页面中选择所有 div。这在您的具体示例中似乎不是问题，但如果您的结构变得更复杂，请确保将新元素仅附加到<strong>一个元素（否则您将拥有多个具有相同ID的元素）
对象文字中的尾随逗号会导致IE出现问题。
您可能在同时发出这么多请求时遇到问题。您可以使用jQuery Deferred objects逐个发出请求。

Answer 4

while(i<=10){
    $.ajax({    
        url: "tabelle.html",
        success: function(data) {
            $('div').append("<p id='element" + i + "'></p>");
            $('#'+i).html(data);
        },
        error: function(){
            alert('nein!');
        } 
    });     
    i++;
}

编辑：这也值得一提......不要在循环中发出ajax请求。发出一个请求，返回所有需要的数据，然后循环结果。

Answer 5

首先，你在这一行中混淆了你的引号：

$('div').append("<p id='+i+'></p>");

那应该是

$('div').append("<p id='" +i+ "'></p>");

但是，停下来！ id不能以数字开头，因此将其更改为

$('div').append("<p id='something" +i+ "'></p>");

其中“某事”必须以字符或下划线开头。

然后将另一行更改为

$('#something' +i).html(data);

Answer 6

您的代码存在多个问题。

首先，确保HTML正确（您只给了我们一小部分内容）。其次，确保在调用脚本时加载jQuery。

但主要问题是报价不正确：

$('div').append("<p id='+i+'></p>");

应替换为

$('div').append('<p id="' + i + '"></p>');

和

$('#"+i+"').html(data);

应替换为

$('#' + i).html(data);

如果这有帮助，请告诉我们 - 可能还有其他问题。

修改

正如其他人提到的那样，您的id不正确（不应该以数字开头，可能会在i之前添加“ p - ”前缀），也是尾随的逗号是不好 - 你应该删除它。此外，您可以使用for代替while并增加;加上你不应该使用i作为全局变量。生成的JS代码如下所示：

for(var i=1; i<=10; i++){ $.ajax({ url: 'tabelle.html', success: function(data) { $('div').append('<p id="p-' + i + '"></p>'); $('#p-' + i).html(data); }, error: function(){ alert('nein!'); } }); }

Answer 7

你的字符串连接看起来不对。你从单引号开始，并使用double连续。

使用

"<p id="+ i +"></p>"

或更好

'<p id="'+ i +'"></p>'

jquery添加个人ID

7 个答案: