How to make my jQuery affect its relative row

sorry if this is hard to understand.

I’ve been working on a solution to a problem I have encountered with a site I am working on.

Basically, there is a list of House Names. Each of these House Names has a colour assigned to it, through an Advanced Custom Field, that represents it. Using PHP, I have managed to generate a list of styles using this field in order to display a square containing its relevant colour, for example:

.HouseOne { background-color: #333333; }

.HouseTwo { background-color: #444444; }

This works fine for an area of the page template where I can edit the markup myself, but I am working on inserting a block of colour to the table that is automatically generated with a WordPress plugin. My idea is this, write a script that:

  1. Grabs the House Name from the appropriate table cell.
  2. Strips all of the white space from the house name.
  3. Inserts at the start of the cell.

So far I have managed to write a script that adds a class rather than inserts HTML, but instead of getting the House Name from each cell and adding the class, it only gets the House Name from the first cell and then adds the class into all of the cells. I need it to get each House Name and add it to its relevant cell. I had trouble getting the HTML prepend to work, as I couldn’t figure out how to add the variable as a class name for the method I had came up with. I could only test my script by adding a class.

Here is what I had came up with:

var House = jQuery(".single.single-developmenttype tr td.column-2").children("td.column-2").html();
jQuery(".single.single-developmenttype tr td.column-2").addClass(House);

Any help would be amazing, thanks in advance.

Read more here: How to make my jQuery affect its relative row

Leave a Reply

Your email address will not be published. Required fields are marked *