使用 JavaScript 向一组链接中的第一个链接添加一个属性

Add an attribute to the first link from a set of links using JavaScript

本文关键字：链接 属性 第一个 添加 一个 一组 JavaScript 使用      更新时间：2023-09-26

我需要在我正在处理的项目中链接列表的第一个链接中添加一个属性，并想办法使用 JavaScript 来做到这一点。以下是下面的代码，它们是动态生成的，但我想要的是找出一种方法，在每个列表的第一个标签中插入id="cover_title"，序列为，这样代码看起来就像下面一样。有什么想法吗？

<ul id="gallery">
<li id="album">
<div id="album_title">Summer 2012</div>
        <div id="photo"><a id="cover_title" href="#"><img src="images/photo1.png"/></a></div>
        <div id="photo"><a href="#"><img src="images/photo2.png"/></a></div>
        <div id="photo"><a href="#"><img src="images/photo3.png"/></a></div>
        <div id="photo"><a href="#"><img src="images/photo4.png"/></a></div>
        <div id="photo"><a href="#"><img src="images/photo5.png"/></a></div>
</li>
<li id="album">
<div id="album_title">Spring 2012</div>
        <div id="photo"><a id="cover_title" href="#"><img src="images/photo1.png"/></a></div>
        <div id="photo"><a href="#"><img src="images/photo2.png"/></a></div>
        <div id="photo"><a href="#"><img src="images/photo3.png"/></a></div>
        <div id="photo"><a href="#"><img src="images/photo4.png"/></a></div>
        <div id="photo"><a href="#"><img src="images/photo5.png"/></a></div>
</li>

首先要注意：id来自标识符，并且在整个文档中必须是唯一的。代码应改用 class="" 属性。例如，请参阅MDN：

该 ID 在文档中必须是唯一的，....

话虽如此，下面的代码在 <a> -元素上设置了适当的class，假设您将上面的所有属性都转换为 class id 。

var links = document.querySelectorAll( 'div.photo:nth-child(2) a' );
for( var i=0; i<links.length; ++i ) {
  links[i].classList.add( 'cover_title' );
}

编辑

下面是一个小提琴示例：链接。

Vega 说得对：不要做 dublicate ID，使用 class。 在 jQuery 中很简单

$('.album_title').each(function(){
  $(this).find('a:first').addClass('cover_title');
});
相关文章：