Php 如何使jQuery影响其相对行

很抱歉，这很难理解

我一直在努力解决我在一个网站上遇到的问题

基本上，有一个房屋名称列表。每一个房子的名字都有一个颜色，通过一个高级自定义字段来表示它。使用PHP，我已使用此字段生成了一个样式列表，以便显示包含相关颜色的正方形，例如：

.HouseOne { background-color: #333333; }

.HouseTwo { background-color: #444444; }

这对页面模板的某个区域很好，我可以自己编辑标记，但我正在将一块颜色插入到表格中，该表格是由WordPress插件自动生成的。我的想法是，写一个脚本：

从相应的表单元格中获取房屋名称

从房屋名称中删除所有空白

在单元格的开头插入

到目前为止，我已经成功地编写了一个脚本来添加一个类，而不是插入HTML，但是它不是从每个单元格中获取房屋名称并添加类，而是从第一个单元格中获取房屋名称，然后将类添加到所有单元格中。我需要它来获取每个房子的名称，并将其添加到相关的单元格中。我很难让HTML前置程序正常工作，因为我不知道如何将变量添加为我提出的方法的类名。我只能通过添加一个类来测试我的脚本

以下是我的想法：

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

---

任何帮助都将是惊人的，提前谢谢。

试试这个演示代码。希望对你有帮助

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

如果您想使用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>

测试1
测试2
测试3
测试1-1
测试1-2
测试2-3
测试2-1
测试2-2
测试2-3
测试3-1
测试3-2
测试3-3
i=0；
$（“tr”）。每个（功能）{
i=i+1；
$（this）.addClass（“house-”+i）；
});

您可以使用此演示代码进行测试

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

测试1
测试2
测试3
测试1-1
测试1-2
测试2-3
测试1-1
测试1-2
测试2-3
第一
前2名
前三名
前4名
前五名
前6名
总长度=$（“#mytable tr td”）。长度；
count_number=-1；
cellText=''；
$（'#mytable td'）。每个（函数（）{
if（计数数量<总长度）{
计数=计数+1；
cellText=$（this.text（）；
$（“span:eq（“+count_number+”））.removeClass（）；
$（“span:eq（“+count\u number+”））.addClass（“house-”+cellText）；
}
});

如果我可以访问表格的标记，这将非常有帮助，但是它是通过WordPress插件自动生成的，我害怕编辑任何代码，因为我希望我的更改保留在插件更新之后。我需要用Javascript/jQuery动态插入这个HTML。非常感谢你的帮助！那么您想使用jQuery添加动态类吗？是的-我需要jQuery进入每一行，从td中找到它的相关文本，然后将这个html前置到td

，其中

[TEXTFROMTD]

是td中的文本，去掉了空格。我希望这是有道理的，虽然我知道这是令人困惑的！

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