如何使我的jQuery影响其相对行

Question

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 <span class="HOUSENAME colourblock"></span> 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.

Answer 1

try this demo code. hope it will help you

<?php $array = array('first','second','third');
foreach ($array as $value) { 
 echo '<div class="house-'.$value.'">'.$value.'</div>';
} ?>

it will create dynamic class like

house-first
house-second
house-third

if you want to add dynamic class using jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>test1</th>
<th>test2</th>
<th>test3</th>
<tr>
    <td>Test1-1</td>
    <td>Test1-2</td>
    <td>Test2-3</td>
</tr>
<tr>
    <td>Test2-1</td>
    <td>Test2-2</td>
    <td>Test2-3</td>
</tr>
<tr>
    <td>Test3-1</td>
    <td>Test3-2</td>
    <td>Test3-3</td>
</tr>
</table>

<script>
i = 0;
$("tr").each(function () {
    i = i + 1;
    $(this).addClass("house-"+i);
});
</script>

you can use this demo code for test

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
    <th>test1</th>
    <th>test2</th>
    <th>test3</th>
    <tr>
        <td>Test1-1</td>
        <td>Test1-2</td>
        <td>Test2-3</td>
    </tr>
    <tr>
        <td>Test1-1</td>
        <td>Test1-2</td>
        <td>Test2-3</td>
    </tr>

</table>
<span>First1</span>
<span>First2</span>
<span>First3</span>
<span>First4</span>
<span>First5</span>
<span>First6</span>

<script>
    total_length = $("#mytable tr td").length;
    count_number = -1;
    cellText = '';
    $('#mytable td').each(function () {
        if (count_number < total_length) {
            count_number = count_number + 1;
            cellText = $(this).text();
            $("span:eq(" + count_number + ")").removeClass();
            $("span:eq(" + count_number + ")").addClass("house-" + cellText);
        }

    });
</script>