添加动态内联CSS

Question

需要在动态生成的内容中添加CSS类/ID。下面的fiddle是一个动态生成的示例格式。

https://jsfiddle.net/g092zo3p/

<ul>
<li><a href="#">Tab</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Accessory</a></li>
</ul>

我无法编辑生成的HTML。因此，我想通过javascript向<li>添加一个类。类名应该是<a>链接内的内容。比方说，在前两个<li>中，我想添加一个与<a>标记中的内容相同的类名。

例如<li class="Video"><a href="#">Video</a></li>

我试着在所有的东西上寻找它。

谢谢。

Answer 1

这是我的逻辑。

• IforEachanchor tag，然后我访问其中的内容
• 我找到anchor tag的父级，然后传递内容值并将其用作类

您可以在DevTools中检查它或检查元素。

如果你有问题，请告诉我。。

const anchorTag = document.querySelectorAll('ul li a');
anchorTag.forEach(x => {
$(x).parent().addClass(`${x.textContent}`);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><a href="#">Tab</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Accessory</a></li>
<li><a href="#">Tab</a></li>
<li><a href="#">Specification</a></li>
<li><a href="#">Accessory</a></li>
</ul>

Answer 2

无Javascript解决方案

正如Nathaniel Flick所建议的，您可以在生成动态列表时添加类。对于PHP，它可以是这样的：

<ul>
<?php
$array_with_list_values = ['Tab', 'Video', 'Accessory'];
for ($i = 0; $i < count($array_with_list_values); $i++) {
?>
<li class="<?= $array_with_list_values[$i]; ?>"><a href=""><?= $array_with_list_values[$i]; ?></a></li>
<?php } ?>
</ul>

不需要javascript和Jquery。

如果它是一个插件呢

制作插件文件的副本，更改与列表生成相关的PHP代码(见上面的例子)，重命名插件副本并激活它，停用原始插件(如这里所建议的：在WordPress中覆盖插件功能)。