using tr:nth-child(n) selector in a jQuery function

Question

I know a little jQuery, but I'm not very good at 'real' JavaScript. I would like to make the following lines a lot simpler:

$('.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,etc (I have now 30 of these blocks of code. I am sure there is a way to get rid of all this redundant code, but I did not succeed yet. I am using this code to populate fields in a form. Help is much appreciated!

I think it would be better if you ask your question at http://codereview.stackexchange.com/ — Uriil, Jun 21 '14 at 08:50

score 0 · Answer 1 · answered Jun 21 '14 at 08:37

You can use for loop.

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

score 0 · Answer 2 · answered Jun 21 '14 at 08:49

try something like this

you can use for loop or whatever method you want to define position variable

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

score 0 · Answer 3 · answered Jun 21 '14 at 10:18

Since you brough up 'real Javascript', here goes: (NB: since JS does not have a native method like jQuery's find, I am making some assumptions, ie. that the classes (.loc, .code, etc.) are all directly on tdelements & that .product is the table.

This code will attach one binding for the whole table (event delegation), check out the fiddle if you like, and press the button to see: http://jsfiddle.net/kevinvanlierde/6E7Gb/

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);

I actually tried all three solutions, but none of them worked. The solution of Gaurav looked best promising to me, because I had the same idea. But this gives the following error: Syntax error, unrecognized expression: :nth-child() ... The solution of Rajesh works but only for position = 2... The solution of Tyblitz gives an error that the variable table is not defined... — TonHaarmans, Jun 22 '14 at 16:36
@TonHaarmans As you can see, it works perfectly in the fiddle (follow the link & test). If your HTML is the same as in the fiddle, it should work. If it doesn't work, then it means you don't have an element with `class=product` so `table=undefined`. All answers will work, the only difference is my 'solution' also works without jQuery ( & is probably somewhat faster). In terms of performance, Gaurav's answer is the least efficient. `Nth-child` doesn't work because it is not native JS, it's jQuery. Please show us the HTML `.product` so we can help. — webketje, Jun 22 '14 at 19:41
Hi Tyblitz, I have set up a test page on http://www.bitbybit.be/test.html. Maybe the error is because document.getElementsByClassName is not standard js ? — TonHaarmans, Jun 24 '14 at 06:01
No, the problem is that you put the fields in an `iframe`. You can't reliably change the content in an iframedue to the same-origin policy http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe — webketje, Jun 24 '14 at 14:09

using tr:nth-child(n) selector in a jQuery function

3 Answers3