jquery 如何使用 tr:nth-child(i） 构造每个或 for 循环构造

jquery how to construct each or for loop construction with tr:nth-child(i)

本文关键字：循环 for 何使用 tr nth-child jquery      更新时间：2023-09-26

我有以下jQuery代码段：

$('.product tr:nth-child(2) .knop',window.parent.document).bind("click", function(){
    $('#edit-submitted-data-cursus').val($('.product tr:nth-child(2) .cursus a',window.parent.document).html())
    $('#edit-submitted-data-cursusdatum').val($('.product tr:nth-child(2) .datum',window.parent.document).html())
    $('#edit-submitted-data-opleidingscode').val($('.product tr:nth-child(2) .code',window.parent.document).html())
    $('#edit-submitted-data-cursuslocatie').val($('.product tr:nth-child(2) .loc',window.parent.document).html())
    $('#edit-submitted-data-cursustarief').val($('.product tr:nth-child(2) .tarief',window.parent.document).html())
}); 
$('.product tr:nth-child(3) .knop',window.parent.document).bind("click", function(){
    $('#edit-submitted-data-cursus').val($('.product tr:nth-child(3) .cursus a',window.parent.document).html())
    $('#edit-submitted-data-cursusdatum').val($('.product tr:nth-child(3) .datum',window.parent.document).html())
    $('#edit-submitted-data-opleidingscode').val($('.product tr:nth-child(3) .code',window.parent.document).html())
    $('#edit-submitted-data-cursuslocatie').val($('.product tr:nth-child(3) .loc',window.parent.document).html())
    $('#edit-submitted-data-cursustarief').val($('.product tr:nth-child(3) .tarief',window.parent.document).html())
});
$('.product tr:nth-child(4) .knop',window.parent.document).bind("click", function(){
    $('#edit-submitted-data-cursus').val($('.product tr:nth-child(4) .cursus a',window.parent.document).html())
    $('#edit-submitted-data-cursusdatum').val($('.product tr:nth-child(4) .datum',window.parent.document).html())
    $('#edit-submitted-data-opleidingscode').val($('.product tr:nth-child(4) .code',window.parent.document).html())
    $('#edit-submitted-data-cursuslocatie').val($('.product tr:nth-child(4) .loc',window.parent.document).html())
    $('#edit-submitted-data-cursustarief').val($('.product tr:nth-child(4) .tarief',window.parent.document).html())
});
    etc.

我有 54 个这样的功能。这是很多冗余。所以我想有一个循环，但直到现在我都无法成功。应该不会太难，但它就在我头顶：-（

有人可以帮助我吗？谢谢！

试试这个：

for (var i = 1; i <= 54; i++) {
    $('.product tr:nth-child(' + i + ') .knop',window.parent.document).bind("click", function() {
        $('#edit-submitted-data-cursus').val($('.product tr:nth-child(' + i + ') .cursus a', window.parent.document).html());
        $('#edit-submitted-data-cursusdatum').val($('.product tr:nth-child(' + i + ') .datum', window.parent.document).html());
        $('#edit-submitted-data-opleidingscode').val($('.product tr:nth-child(' + i + ') .code', window.parent.document).html());
        $('#edit-submitted-data-cursuslocatie').val($('.product tr:nth-child(' + i + ') .loc', window.parent.document).html());
        $('#edit-submitted-data-cursustarief').val($('.product tr:nth-child(' + i + ') .tarief', window.parent.document).html());
    });
}

这应该有效：

var productsRows = $('.product tr');
productsRows.on('click', '.knop button', function(evt){
    var currentTarget = $(evt.currentTarget);
    var currentRow = currentTarget.parents('tr');
    $('#edit-submitted-data-cursus').val(currentRow.find('.cursus').html());
    $('#edit-submitted-data-cursusdatum').val(currentRow.find('.datum').html());
    $('#edit-submitted-data-opleidingscode').val(currentRow.find('.code').html());
    $('#edit-submitted-data-cursuslocatie').val(currentRow.find('.loc').html());
    $('#edit-submitted-data-cursustarief').val(currentRow.find('.tarief').html());
});

这是小提琴：小提琴

这也应该消除了通过从 2 开始来区分表头的需要（您可能希望使用 <thead> 周围和<th>而不是 <td> 无论如何），因为它只是侦听.knop单元格中按钮的单击（如果没有按钮，则事件无法触发）。

相关文章：