Simultaneously Iterating Over Two Sets of Elements in jQuery

Question

I have a table containing many pairs of text input fields in separate columns. I want to iterate through the input fields in the first column and use those values to set the value of the corresponding input field in the adjacent column.

<table>
    <tr>
         <td><input type="text" class="left" /></td>
         <td><input type="text" class="right" /></td>
    </tr>
    <tr>
         <td><input type="text" class="left" /></td>
         <td><input type="text" class="right" /></td>
    </tr>
  ...
</table>

I have just started learning jQuery so perhaps the answer is obvious. So far I have only

$("input.left").each(function() {
    // use the value of $(this) to set the 
    // value of the text field to the .right
})

Answer 1

Lots of ways to do this. Here's one.

$("tr").each(function() {
  $(this).find(":last-child input").val($(this).find(":first-child input").val());
});

or another:

$("input.left").each(function() {
  $(this).parent().nextSibling().find("input.right").val(this.value);
});

and so on.

Answer 2

What you are wanting to do is known as a 'zip' operation. This is something seen in functional programming languages quite a lot. It is a function that combines two sequences of equal length into a single sequence containing a pair (or n-tuple) of elements.

Here you can find an implementation of 'zip' for jquery. It's a jQuery plugin. Available on Google Code

It looks like you can use it like tihs:

$.zip($("input.left"), $("input.right")).each(function () {
   var left = this[0];
   var right = this[1];
})