Add dynamic inline CSS

Question

Need to add a CSS class/ID in a dynamically generated content. The following fiddle is a sample format which is dynamically generated.

https://jsfiddle.net/g092zo3p/

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

I cannot edit the generated HTML. Hence I want to add a class to <li> via javascript. The class name should be the content inside the <a> link. Lets say in the first two <li> I want to add a class name which is the same as the content within the <a> tag.

e.g., <li class="Video"><a href="#">Video</a></li>

I tried search for it on good and all.

Thank you.

Can you please include your code? https://stackoverflow.com/help/minimal-reproducible-example — Strywyr, Jan 17 '23 at 03:31
If it's dynamically generated, why not add the class="" with the link content as the class? — Nathaniel Flick, Jan 17 '23 at 03:45
it is dynamically generated via a plugin in wordpress. so it needs a minor edit now. — sameermanandhar, Jan 17 '23 at 03:46

score 2 · Answer 1 · answered Jan 17 '23 at 03:45

Here's my logic.

I forEach the anchor tag then i access the content inside it.
I find the parent of the anchor tag then pass the content value and use it as class.

You can check it in DevTools or inspect elements.

Just let me know if you have question..

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>

score 1 · Answer 2 · answered Jan 17 '23 at 04:59

No Javascript Solution

As Nathaniel Flick suggested, you can add class when you generate your dynamic list. For PHP it can be like this:

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

No need in javascript and Jquery.

What if it is a plugin?

Make a copy of plugin files, change PHP code related to the generation of the list (see example above), rename your copy of plugin and activate it, deactivate original plugin (as suggested here: Override Plugin Function in WordPress).

Add dynamic inline CSS

2 Answers2