jquery - 使用 td-value 作为 jQuery 的 tr-class？

Question

我想给表格行一个单元格的类，如下所示：

我有这张桌子，

<table id="mytable">
 <tr>
  <th>Name</th>
  <th>Favorite color</th>
 </tr>
  <td>James</td>
  <td>red</td>
 </tr>
 <tr>
  <td>John</td>
  <td>blue</td>
 </tr>
</table>

我希望它以这样的方式结束。

<table id="mytable">
 <tr>
  <th>Name</th>
  <th>Favorite color</th>
 </tr>
 <tr class="red">
  <td>James</td>
  <td>red</td>
 </tr>
 <tr class="blue">
  <td>John</td>
  <td>blue</td>
 </tr>
</table>

这可能吗？

Answer 1

您可以使用addClass方法：

$('tbody tr').addClass(function(){
    return $('td:last', this).text()
})

http://jsfiddle.net/SweLe/

请注意，您tr之前缺少开始标签<td>James</td>。

Answer 2

使用那里的 HTML：

$("tr:not(:first)").each(function(i) {
    $(this).addClass($(this).children("td").last().text());
});

jsFiddle _{（又名。示例）}

这是做什么的：

• $ = jQuery的简写符号
• ("tr = jQuery 选择器的开始，在这种情况下，我们从标签开始tr
• :not = 这告诉我们的选择器不要选择括号中的内容
• (:first) = 这是 的参数:not，在这种情况下告诉它我们不希望在整体元素选择中的第一个元素
• .each( = 这个 jQuery 函数在被选中的元素上就像一个 For 循环
  • jQuery 对象基于 0 索引（意味着它从 0 开始并向上计数）
• function(i) { = 这是callback.each 调用函数的开始。i表示每个元素通过时的索引
• $(this) = 这个 jQuery 选择器在循环中抓取当前元素
• addClass( = 这个 jQuery 函数允许我们向元素添加类名
• $(this) = 再次，指的是当前被操作的元素
• .children("td") = 由于当前元素是一个 TR，那么我们知道它的子元素应该是td's，因此我们使用子选择器来抓取这些子元素
• .last() = 这告诉我们的选择器我们只想要对象集合中的最后一个元素
• .text() = 这告诉我们的选择器我们想要选择元素的文本
• ); }); = 简单地关闭一切！