集& lt; h2>文本基于表格单元格- jQuery

Set <h2> text based on table cells - jQuery

本文关键字：表格 jQuery 单元格 h2 lt 文本 于表格      更新时间：2023-09-26

我试图循环通过8 h2的类。attr-lbl，并将它们的文本设置为类的top 8 td的。表中的t0_rhc。所以基本上，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元素?提前感谢，如有必要，乐意详细说明

为什么需要count变量?

对于要迭代的元素使用 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>

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

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

您可以使用.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>

相关文章：