Modify jQuery function (grab each DOM element)

Question

This is function that I use to change the alpha color of a DOM's element/s.

function RGBA(e, alpha) { //e = jQuery element, alpha = background-opacity
    b = e.css('backgroundColor');
    e.css('backgroundColor', 'rgba' + b.slice(b.indexOf('('), ( (b.match(/,/g).length == 2) ? -1 : b.lastIndexOf(',') - b.length) ) + ', '+alpha+')');
}

I found this function here Changing background opacity of div using RGBa .

I am using wordpress therefore I want this function to grab each div within my loop of a certain html class.

Right now this function works well but it changes the alpha color of first category and loops that color through all categories. If you need more details then: I have a wordpress plugin that assigns background color property to categories and then outputs it on live site.

My code looks something like this:

<p class="x" style="background-color: <?php echo $rl_category_color; ?></p>
<?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; }

Now I target the x class in following function

RGBA(jQuery('.x'), 0.2);

If that helps you then here you have visual on my situation.

And problem is it grabs the first category color and assigns it to every p with x class ( it should loop throught every single one and output it separately I think or it should target the p element by its full classname, I've added the wordpress post id function to make every class unique by adding an post ID to every single x class element so every x class element grabbed by its full classname would be different but thats just my thoughts ).

So my goal with this is in following image Its just part of the design why I want to make it opaque.

Sorry if I violate rules of asking a question, I am not an expert in any of these languages.

Answer 1

What I should do is this:

$(".x").each(function() {
  RGBA($(this), 0.2);
}