javascript - 使用 Jquery 获取和设置内容的位置

Question

我有一个包含两行的 table，第一行是 thead，第二行是 tbody(是的，我知道我没有包括这些标签，无需更正)。我的目标是获取每个 th 的位置。我的总体目标是克隆每个 th 的内容并将其添加到每个相应的 td 中，所以我有一个非常适合移动设备的表格，除了我不知道如何动态地实现这一点。

<tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
</tr>
<tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
</tr>

我只是对如何获得每个 th 的位置感到困惑，我想一旦有了它，我就可以解决这个问题的其余部分。任何人都可以提示我应该去哪里吗？

Answer 1

假设我正确理解了你的问题，你需要这样的输出:

<tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
</tr>
<tr>
    <td>1 - one</td>
    <td>2 - two</td>
    <td>3 - three</td>
    <td>4 - four</td>
</tr>

如果是这样，您需要使用 index() 获取第 th 的列并根据需要追加。试试这个:

$('tr td').each(function() {
    var idx = $(this).index();
    $(this).prepend($('th').eq(idx).text() + ' - ');
});

Example fiddle