Question

我目前不得不扩展一个非常古老的ASP.NET站点，它有一个数据库生成的前端，是一个应用程序的庞然大物，它需要完全重写 - 但是我被告知要添加它而不是重新开发它 - 老鼠！

好的后端在前端呈现下表：

<table id="tableID">
<tr>
    <td class="qCol">
    <!-- Label here -->
    </td>

    <td class="qCo2">
    <!-- img here -->
    <!-- and a text box -->
    </td>

    <td class="qCo3">
    <!-- select menu here -->
    </td>

    <td class="qCo4">
    <!-- radio buttons here -->
    </td>

    <td class="qCo5">
    <!-- select menu here -->
    </td>

    <td class="qCo6">
    <!-- hidden validation image here -->
    </td>
<tr>
</table>

现在（请不要问为什么）我必须使用类“qCol”覆盖td的内容，并使用类“qCo5”覆盖td的内容。

这是一个非常容易使用jQuery的事情：

$('#tableID td.qCol').html($('#tableID td.aCo5').html());

现在我修改了后端，因此为表生成了更多的行，这些行都没有id，我需要在每行的tds之间进行HTML覆盖（总共会有4行）。

我知道如何使用JavaScript和一些循环来实现这一点，但我想养成使用jQuery来实现这一目的的习惯，并结合.each（）方法。

我很困惑如何使用“this”，然后选择合适的td，例如......

$('#tableID tr').each(function () {
      $(this).find('td .qCol').html($(this).find('td.aCo5').html());
});

最好的方法是什么？

如果这个问题解释得不好请说出来，我会扩展

Answer 1

这会将qCol替换为qCo5 任何 <table>

$('table tr td.qCol').each(function () {
    var qCo5 = $(this).nextAll('td.qCo5');
    $(this).html(qCo5.html());
});

主选择器只抓取所有td.qCol元素，然后使用.nextAll()在同一td.qCo5中查找相应的<table>兄弟，并将内容复制到{{1在这种情况下，$(this)。

Answer 2

你可以这样做：

$('#tableID tr').each(function () {
      $(this).children('td.qCol').html($(this).children('td.qCo5').html());
});

Answer 3

jQuery each()函数允许您以不同的方式执行此操作，而不使用this。像这样：

$('#tableID tr').each(function (i, row) {
    var row = $(row);
    row.find('td .qCol').html(row.find('td.aCo5').html());
});

Answer 4

$('#tableID tr').each(function () {    
    $(this).children('.qCol').html($(this).children('.aCo5').html()); 
});

作为答案;）

jQuery使用.each循环并使用带有$（this）的选择器

4 个答案: