Question

我需要在Wordpress中使用特定插件来执行项目。它输出几个DIV，每个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

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

希望这会有所帮助：＆gt;

＆＃13;

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

＆＃13;

body div {
  width: 50px;
  height: 50px;
  display: inline-block;
}


#commonName-0{
  background: red;
}

#commonName-1{
  background: green;
}

#commonName-2{
  background: blue;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: