如何让我的jQuery影响它的相对行

Question

抱歉，如果这很难理解。

我一直在研究我正在处理的网站遇到的问题的解决方案。

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

.HouseOne { background-color: #333333; }
.HouseTwo { background-color: #444444; }

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

1. 从相应的表格单元格中获取房屋名称。
2. 从房屋名称中删除所有空格。
3. 在单元格的开头插入<span class="HOUSENAME colourblock"></span>。

到目前为止，我已经设法编写了一个脚本来添加一个类而不是插入 HTML，但它不是从每个单元格获取房屋名称并添加类，而是仅从第一个单元格获取房屋名称，然后将类添加到所有单元格中。我需要它来获取每个房屋名称并将其添加到其相关单元格中。我无法让 HTML prepend 工作，因为我无法弄清楚如何将变量添加为我想出的方法的类名。我只能通过添加一个类来测试我的脚本。

这是我想到的：

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

任何帮助都会很棒，提前感谢。

Answer 1

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

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

它将创建动态类，例如

house-first
house-second
house-third

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

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

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