Question

I am really confused here..
I am trying to get the values from a table and add those values to the div with class title using
append function and .text function.
The problem is that when I use the each function the last value in table gets appended and
the rest are skipped..
This is my code:

<script type="text/javascript">
    $(document).ready(function() {
        $('#nameGridView tr').each(function() {
            if (!this.rowIndex) return; // skip first row
            var productName = this.cells[0].innerHTML;
            $('.title').each(function (i, obj) {
                $('.title').html(productName);

            });

        });
    });

</script>

Please tell me how to iterate through each table and add simultaneously, like say for first div title, the first value from table gets appended and so on.
thanks.

Answer 1

Use append() to append to an element. Also use .eq() to get the div with the same index as the row.

<script type="text/javascript">
    $(document).ready(function() {
        var $title = $('.title');
        $('#nameGridView tr').each(function(i) {
            if (!this.rowIndex) return; // skip first row
            var productName = this.cells[0].innerHTML;
            $title.eq(i-1).append(productName);            
        });
    });

</script>