Question

这看起来很简单，但我还没有找到解决方案。如果我想将一个bootstrap类应用于标签的所有子项（特定类型，例如下面的<td>），有没有办法在不为每个子标记单独指定的情况下执行此操作？我搜索过其他SO帖子，但是他们中的很多人都在讨论用CSS将所有子元素应用相同的样式，但我不想直接在CSS中应用有效样式，因为这样做是多余的（因为已经存在）我想要应用于所有子标签的预定义类，理想情况下。

例如：

如果我需要第一列中每个单元格<td class="text-right">，我必须这样做：

<table class="table">
  <tr><td class="text-right" valign="middle">..</tr>
  <tr><td class="text-right" valign="middle">..</tr>
  <tr><td class="text-right" valign="middle">..</tr>
</table>

有没有办法以更模块化的方式做到这一点？我知道我们不能在另一个内部引用CSS类，否则上面的内容很简单。

Answer 1

如果您要做的只是应用对齐样式 - 您不需要一个类 - 您可以使用CSS - 请注意我添加了浅绿色背景以突出显示效果（很难看到对齐）这个小样本表）。

编辑 - 我已经修改了我的答案以适应OP的情况 - 迭代.table中的每个tr，然后在其中找到第一个td并应用addClass（）。

}）

$(document).ready(function(){
  $('.table tr').each(function(){
  $(this).find('td:first').addClass('text-right');
  })
})

.table tr td{
  width:100px
  
}

.text-right{
  text-align:right;
  background:aqua
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <td valign="middle">test 1</td>
    <td valign="middle">test 2</td>
    <td valign="middle">test 3</td>
  </tr>
  <tr>
    <td valign="middle">test 1</td>
    <td valign="middle">test 2</td>
    <td valign="middle">test 3</td>
  </tr>
    <tr>
    <td valign="middle">test 1</td>
    <td valign="middle">test 2</td>
    <td valign="middle">test 3</td>
  </tr>
</table>

Answer 2

如果你确实需要应用类（不仅仅是CSS样式），你应该使用JS。这样的东西（jquery）：

$('table tr td:first-child').addClass('text-right').attr('valign','middle');

为多个标记指定相同的CSS类

2 个答案: