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

Question

我需要在 Wordpress 中为元素使用特定插件。它输出几个 DIV，每个都具有相同的 ID。

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

通常我会改变 PHP 或使用 nth-child...但是这个插件基本上使这两个选项都不可能...漫长(且令人沮丧)的故事。

所以我正在寻找一个 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

这将获取所有具有 commonName id 值的 ids使用 each 循环，我们可以使用 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>