使用Jquery在<td>中获取CSS生成的文本

Question

我有这样一张桌子:

<table id="orders">
  <tr>
    <td>05/06/2005</td>
    <td>3216549</td>
    <td>description</td>
    <td>2.000,00</td>
    <td>100</td>
    <td>20,00</td>
    <td><div id="state" class="state-c"> </div></td>
    <td><a href="modify.php?id=222"><span class="bt-edit">EDIT</span></a></td>
  </tr>
<table>

该部分<div id="state" class="state-c"> </div>告诉"已批准","已拒绝"等,并由CSS生成:

.state-c:before {
  content: "Confirmed";
}

现在我需要获取这些表格单元格的文本值,而对于我成功使用.text()方法的所有单元格,它不会让CSS生成的文本"确认".我试图使用getGeneratedStyle,.value并且一直在寻找信息,但没有运气.

我的问题是:<div id="state" class="state-c"> </div>如果你看一下代码,怎么能把生成的文本放到哪个实际上是空的？

Answer 1

您可以像以下一样使用它window.getComputedStyle.

var text = window.getComputedStyle($('#state')[0], ':before').content
alert(text)

.state-c:before {
  content: "Confirmed";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="orders">
  <tr>
    <td>05/06/2005</td>
    <td>3216549</td>
    <td>description</td>
    <td>2.000,00</td>
    <td>100</td>
    <td>20,00</td>
    <td><div id="state" class="state-c"> </div></td>
    <td><a href="modify.php?id=222"><span class="bt-edit">EDIT</span></a></td>
  </tr>
<table>