jquery如何使用tr:nth-child(i)构造每个或用于循环构造
jquery如何使用tr:nth-child(i)构造每个或用于循环构造
提问于 2014-12-10 11:35:42
我有以下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个这样的功能。这可是太多的冗余了。因此，我希望有一个循环，但到目前为止，我还未能成功。不应该太难，但它只是在我的头顶之上：-
有人能帮我吗？已经谢了！
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-12-10 11:40:49
这应该是可行的：
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> fire和<th>而不是<td> )，因为它只是监听.knop单元格中按钮的点击(如果没有按钮，事件就不能触发)。
Stack Overflow用户
发布于 2014-12-10 11:41:17
试试这个：
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());
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27400028
复制相关文章
相似问题
腾讯云开发者
