基于 table 个单元格设置 <h2> 个文本 - jQuery

Question

我正在尝试遍历 class .attr-lbl 的 8 h2's，并将它们的文本设置为table中class.t0_rhc对应的前8个td's。所以基本上 h2 的第一个实例需要设置为 td 的第一个实例，依此类推。在此示例中，第一个 h2 将设置为 TEXT 1，第二个设置为 TEXT 2 等等上。

我尝试了一个 .each() 循环，但它一直将所有 h2 的 设置为相同的值（即 TEXT 1）——这是我目前所拥有的：

<h2 class="attr-lbl"></h2>
<h2 class="attr-lbl"></h2>
<!-- ...etc -->

<td class="t0_rhc">TEXT 1</td>
<td class="t0_rhc">TEXT 2</td>
<!-- ...etc -->

var count = 0;
$('h2.attr-lbl').each(function() {
    var title = $('td.t0_rhc').eq(count).text();
    $('h2.attr-lbl').text(title);
    count++;
});

如何使每个 h2 元素的函数向下移动 table？提前致谢，如有必要，很乐意详细说明

Answer 1

你应该对上下文敏感。使用 this:

var count = 0;
$('h2.attr-lbl').each(function() {
    var title = $('td.t0_rhc').eq(count).text();
    $(this).text(title);
    count++;
});

Answer 2

为什么需要计数变量？

只需对要迭代的元素使用 each() 并使用 eq().

$('td.t0_rhc').each(function(key, value) {
  $('h2.attr-lbl').eq(key).text($(this).text());
});

$('span.t0_rhc').each(function(key, value) {
  $('h2.attr-lbl').eq(key).text($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="attr-lbl"></h2>
<h2 class="attr-lbl"></h2>
<h2 class="attr-lbl"></h2>

<span class="t0_rhc">TEXT 1</span>
<span class="t0_rhc">TEXT 2</span>
<span class="t0_rhc">TEXT 3</span>

Answer 3

您可以使用 .text(fn) 并使用当前元素的 index 从相关 span

中获取文本

$('h2.attr-lbl').text(function(index, _) {
  return $('span.t0_rhc:eq(' + index + ')').text();
});

$('h2.attr-lbl').text(function(index, _) {
  return $('span.t0_rhc:eq(' + index + ')').text();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="attr-lbl"></h2>
<h2 class="attr-lbl"></h2>

<span class="t0_rhc">TEXT 1</span>
<span class="t0_rhc">TEXT 2</span>

基于 table 个单元格设置 <h2> 个文本 - jQuery

Set <h2> text based on table cells - jQuery

html

javascript

each

jquery