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

Question

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

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

我遇到的问题是如何附加数值，而不是简单地将 ID 设置为等于数值。我不想丢失现有 ID。

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

#headerAfirstLink1, #headerAsecondLink1, #headerAthirdLink1, #headerAfourthLink1

(If modCount[0] == 1).

我相信它非常简单，但希望得到一些指导。谢谢

Answer 1

尝试使用.attr("attrName" , callBack)签名来实现你想要的。

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

不要将传递的第一个参数与回调混淆。是指数。我只是在那里使用了下划线，因为在我们的例子中不需要它。只是为了隐藏它的视觉效果。

或者 best/maintainable 方法将为这四个元素设置一个通用的 class（例如：测试）并使用 class selector there instead of 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 属性

Append array value to ID attribute of selected elements

javascript

jquery

attributes

jquery-selectors