Question

简单地说，我正在尝试使用jQuery将数值（当前存储在数组中）附加到许多指定元素的“id”属性的末尾。

$('#headerAfirstLink, #headerAsecondLink, #headerAthirdLink, #headerAfourthLink').attr("id", // Append modCount[0].toString() to each existing ID);

我正在努力解决如何附加数值，而不是简单地将ID设置为数值。我不想丢失现有的ID。

在示例中，首选的结果ID应为：

#headerAfirstLink1, #headerAsecondLink1, #headerAthirdLink1, #headerAfourthLink1

（如果modCount [0] == 1）。

我确信这是十分简单的，但我会很感激一些指导。感谢

Answer 1

尝试使用.attr("attrName" , callBack)签名来实现您的目标。

$('#headerAfirstLink, #headerAsecondLink, #headerAthirdLink, #headerAfourthLink')
  .attr("id", function(_,id){
     return id +  modCount[0];
  });

不要混淆用callBack传递的第一个参数。这是索引。我只是在那里使用了下划线，因为在我们的案例中并不需要。只是隐藏它的视觉效果。

或者最好/可维护的方法是为这四个元素设置一个公共类（例如：test），并在那里使用class selector而不是multiple selector。

$('.test').attr('id', function(_, id) {
    return id + modCount[0];
});

Answer 2

您可以使用.attr(attributeName, function)语法更新每个元素的属性值。

$('#headerAfirstLink, #headerAsecondLink, #headerAthirdLink, #headerAfourthLink')
    .attr("id", function(index, oldId) {
        // oldId is the attribute value
        return oldId + modCount[0];
    });

为了以防万一，要更新ID以header开头的所有元素的属性，您可以使用attribute starts with selector。

$('[id^="header"]').attr('id', function(index, oldId) {
    return oldId + modCount[0];
});

将数组值附加到所选元素的ID属性

2 个答案: