Question

我正在尝试为每个生成这样的div添加一个id。

var eo_url_1 = 'http://www.enviroptics.com/ecommerce/';
var eo_url_ext = "environmentally-sealed-thermocouple-"
var eo_url_2 = '.html';
var eopartnum = [
  'NB4-CAXL-14U-12-AAG',
  'NB4-CAXL-14U-12-BAG', 
  'NB4-CAXL-14U-12-CAG'
];

for(var index = 0; index < eopartnum.length; index++){
  var url = `${eo_url_1}${eo_url_ext}${eopartnum[index]}${eo_url_2}`;
  console.log(url);
}

如何动态地为每个动态添加ID？

这是我的代码

<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>

我知道它不完整，但我不知道如何为每个div添加一个id！

Answer 1

您可以使用attr()或prop()方法使用回调函数，该函数在内部迭代元素并使用回调中的第一个参数生成id值，该回调是元素的索引集合。

$('.wpmlposts').attr('id', function(i) {
  return 'ranId' + i;
})

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

Answer 2

添加id很容易，假设这些元素已存在于DOM中：

$('.wpmlposts').prop('id', function(i){
    return 'idPrefix' + i;
});

＆＃13;

$('.wpmlposts').prop('id', function (i){
  return 'idPrefix' + i;
});

＆＃13;

div::before {
  content: attr(id);
}

＆＃13;

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

＆＃13;

顺便说一句，你真的不需要JavaScript，以下内容也适用（在相对最新的浏览器中）：

Array.from(document.querySelectorAll('.wpmlposts')).forEach((el,index) => el.id = 'idPrefix' + i);

＆＃13;

Array.from(document.querySelectorAll('.wpmlposts')).forEach((el,index) => el.id = 'idPrefix' + index);

＆＃13;

div::before {
  content: attr(id);
}

＆＃13;

<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>
<div class="wpmlposts"></div>

＆＃13;

参考文献：

prop()。

Answer 3

你也可以这样做

$('.wpmlposts').each(function(i){
    $(this).attr('id','randId'+i);
});

// displaying here

$('.wpmlposts').each(function(i){
    console.log(this);
});

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

Answer 4

您需要使用每个函数单独处理每个节点。 each function

$('.wpmlposts').each(function(index) {$(this).attr('id', index);
});

Answer 5

＆＃13;

var _=$('.wpmlposts'); //let's cache the array
 var length = _.length; //let's cache the  length
    for(var x=0; x<length; x++) {
        _.eq(x).prop('id', x);
    }

＆＃13;

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

＆＃13;

在动态div上使用jQuery添加ID

5 个答案: