在页面上找到重复的div ID名称，并使用Javascript或jQuery追加一个数字

Question

我被要求在一个项目中使用Wordpress中的特定插件。它输出几个DIVs，每个DIVs都有相同的ID。

但是，我需要单独隔离它们，以便在CSS中分别设置它们的样式。

通常，我要么修改PHP，要么使用第n- impossible...long……但是这个插件基本上让这两个选项都变得令人沮丧(而且令人沮丧)。

因此，我正在寻找一种Javascript/jQuery解决方案，它可以插入到全局.js文件中，并在页面加载后使用$(document).ready语句执行。

我就是想不通。js/jquery代码需要在完成加载后更改该插件的html输出。它将扫描页面，找到#commonName的每个实例，并在其上附加一个数字或添加一个类名。不管它是如何完成的，只要每个DIV在名称上都是唯一的。

该插件在页面上输出类似以下内容(简化)：

<div id="commonName"></div>
<div id="commonName"></div>
<div id="commonName"></div>

我希望我的Javascript或jQuery代码找到并更改此ID的每个实例，并将其转换为：

<div id="commonName" class="copy-1"></div>
<div id="commonName" class="copy-2"></div>
<div id="commonName" class="copy-3"></div>

或者这也很好：

<div id="commonName-1"></div>
<div id="commonName-2"></div>
<div id="commonName-3"></div>

感谢大家的帮助！

Answer 1

这将使用一个each循环获取所有id值为commonName的ids，我们可以使用attr函数更改id值。

希望这能对:>有所帮助

​

$("[id='commonName']").each((i,el)=>$(el).attr('id','commonName-'+i))

console.log($("body").children())

body div {
  width: 50px;
  height: 50px;
  display: inline-block;
}


#commonName-0{
  background: red;
}

#commonName-1{
  background: green;
}

#commonName-2{
  background: blue;
}

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

​