在jQuery函数中使用tr：nth-​​child（n）选择器

Question

我知道一点jQuery，但我并不擅长“真正的”JavaScript。我想让以下几行更简单：

$('.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())
    });

等等（我现在有30个这样的代码块。我确信有一种方法可以摆脱所有这些冗余代码，但我还没有成功。我正在使用这段代码来填充字段一个表格。非常感谢帮助！

Answer 1

您可以使用for循环。

var i;
for (i = 1; i < 41; 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())
    });
}

Answer 2

尝试这样的事情

您可以使用for循环或任何您想要定义位置变量的方法

        var position = 2;// just for example
        var elem = $('.product tr:nth-child('+position+')', window.parent.document);

        elem.find('.knop').bind("click", function() {
            $('#edit-submitted-data-cursus').val(elem.find('.cursus a').html())
            $('#edit-submitted-data-cursusdatum').val(elem.find('.datum').html())
            $('#edit-submitted-data-opleidingscode').val(elem.find('.code').html())
            $('#edit-submitted-data-cursuslocatie').val(elem.find('.loc').html())
            $('#edit-submitted-data-cursustarief').val(elem.find('.tarief').html())
        });

Answer 3

既然你通过'真正的Javascript'，这里有： （注意：由于JS没有像jQuery的查找本机方法，我正在做一些假设，即类（.loc，.code等）都直接在td元素上 ＆安培; .product就是表格。

此代码将为整个表附加一个绑定（事件委托），如果您愿意，请查看小提琴，然后按button查看：http://jsfiddle.net/kevinvanlierde/6E7Gb/ < / p>

var selCursus = document.getElementById('edit-submitted-data-cursus'),
    selDatum  = document.getElementById('edit-submitted-data-cursusdatum'),
    selCode   = document.getElementById('edit-submitted-data-opleidingscode'),
    selLoc    = document.getElementById('edit-submitted-data-cursuslocatie'),
    selTarief = document.getElementById('edit-submitted-data-cursustarief'),
    table =  document.getElementsByClassName('product')[0];

function getCursus(e) {
  var tr, td;
  if ( e.target.className.match('knop') ) {
    tr = e.target.parentNode.parentNode; // button > td > tr
    td = tr.getElementsByTagName('td');
    for ( var i = 0; i < td.length; i++ ) {
      switch(td[i].className) {
       case 'cursus':
       selCursus.value = td[i].innerHTML;
       break;
       case 'datum':
       selDatum.value = td[i].getElementsByTagName('a')[0].innerHTML;
       break;
       case 'code':
       selCode.value = td[i].innerHTML;
       break;
       case 'loc':
       selLoc.value = td[i].innerHTML;
       break;
       case 'tarief':
       selTarief.value = td[i].innerHTML;
       break;
      }
    }
  }
}
table.addEventListener('click', getCursus, false);