Question

基本上我使用jquery append()函数创建x个图像框，所有函数都具有相同的类名，但现在我需要将每个框ID设置为i。为了避免混淆，这就是我的意思：

for(i=0;i<10;i++){
    $('.d').append('<img src="" class="UP__" width="120" height="120">');
    $('.d img').attr("id",i);
}

我面临的上述代码的问题是它将所有10个img框id设置为10，但我需要将第一个框ID设置为1 ，第二个是2，依此类推。

我的问题是如何将每个元素ID设置为i的值。

提前致谢

Answer 1

只需将ID添加到img标记

即可

$('.d').append('<img src="" id="'+i+'" class="UP__" width="120" height="120">');

Answer 2

首先声明您的变量（无论是使用var还是let）以避免创建全局变量，然后您可以在循环中添加id：

for(let i=0; i<10; i++){
    $('.d').append('<img src="" id="' + i + '" class="UP__" width="120" height="120">');
}

或者在循环之外这样做：

for(let i=0;i<10;i++){
    $('.d').append('<img src="" class="UP__" width="120" height="120">');
}

// here we select all the matching <img> elements, and update
// 'id' property using the prop() method, and the anonymous
// function:
$('.d img').prop('id', function (index){
  // 'index' is the index of the current element in
  // the jQuery collection over which prop() iterates:
  return index;
});

您发布的方法的问题在于您选择了所有匹配的元素（在循环的每次迭代中）并将所有这些元素的id设置为相同的数字。上面显示的两种方法都可以避免这种情况。

请注意，使用数字字符作为id的第一个字符会使用于定位id的CSS选择器变得复杂，因为您首先需要转义数字字符。

考虑到这一点，要选择id="1"元素，您需要使用：

#\31 {
  /* css */
}

Answer 3

您无需提供 ID 。只需使用jQuery的每个函数。

我手动添加了图像，但您可以使用自己的代码使其成为动态图像。

<div class="d">
  <img src="http://afterishtar.pl/images/100x100.gif">
  <img src="http://afterishtar.pl/images/100x100.gif">
  <img src="http://afterishtar.pl/images/100x100.gif">
  <img src="http://afterishtar.pl/images/100x100.gif">
  <img src="http://afterishtar.pl/images/100x100.gif">
</div>

然后这个。

$(document).ready(function() {

  $(".d img").each(function( index ) {
    console.log(index);
  });

});

Answer 4

因为你要将id添加到.d div中的所有img标签。

PS：始终正确设置图像src标记。图像标记的空src会产生许多问题而不是它解决的问题。如果src未知或稍后设置，请使用about_blank。

此外，它始终是一个很好的建议，以尽可能少的时间更改dom。如果可能，在完成所有操作并将其附加到DOM之前附加新创建的元素。

＆＃13;

$(function() {

  for (i = 0; i < 10; i++) {
    var $img = $('<img src="about_blank" class="UP__" width="120" height="120">');
    $img.attr("id", i).attr("title", i);

    $('.d').append($img);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="d"></div>

＆＃13;

如何在jquery中为id设置id？

4 个答案: