Help: Iterate through unknown number of elements, apply function

[xstaceyamayx]

Hey there, newbie here...

Still getting a grasp on jQuery, so I'm probably overthinking or extra-
typing...

Anyway, I have 2 select boxes. I can populate SelectA with items from
a database, move the items from selectA to selectB and back again by
clicking "add" and "remove"...
BASIC CODE (HTML):
<div>
<select multiple id="selectA">
<?php
//populate with database information
?>
</select>
add >>
</div>
<div>
<select multiple id="selectB"></select>
<< remove
</div>

(JQUERY):
$(document).ready(function(){
$('#add').click(function() {
return !$('#selectA
option:selected').remove().appendTo('#selectB');
});
$('#remove').click(function() {
return !$('#selectB
option:selected').remove().appendTo('#selectA');
});
});

THE ABOVE SITUATION WORKS...
What I want to do is generate a set of these "selects" for each
category in my database. I can do that through php and the use of a
counter.... I get "selectA_".$ctr, "selectB_".$ctr, add.$ctr, and
remove.$ctr as I should (i.e. first set of generated boxes would have
the elements: selectA_1, selectB_1, add1, and remove1). BUT I have to
add the click functions in the document ready function to this unknown
number of elements, so I'm trying my first jQuery each statement -
without any luck....

HERE IT IS.... sorry if I butchered it... #input4 is the name of the
form I have this scenario in...

$("#input4").find("select").each(function(i){

var addButton = "#add"+i
var selectA = "#selectA_"+i+ " option:selected";
var B = "#selectB_"+i;
$("'"+addButton+"'").click(function() {
return !$("'"+selectA+ "'").remove().appendTo("'"+B
+"'");
});

var removeButton = "#remove"+i
var selectB = "#selectB_"+i+ " option:selected";
var A = "#selectA_"+i;
$("'"+removeButton+"'").click(function() {
return !$("'"+selectB+ "'").remove().appendTo("'"+A
+"'");
});
});


I'm a little lost at the moment and you could say overwhelmed. I just
need a little bump in the right direction to regain my "get up and
go."
Thanks in advance.

[Nathan Klatt]

Post by xstaceyamayx
Anyway, I have 2 select boxes. I can populate SelectA with items from
a database, move the items from selectA to selectB and back again by
clicking "add" and "remove"...

Change your HTML to look something like this: <div class="input"> <select multiple class="selectA"> <?php //populate with database information ?> </select> <div> <button class="add">add &gt;&gt;</button><br />
<button class="remove">&lt;&lt; remove</button>
</div>
<select multiple class="selectB"></select>
</div>

Then your Javascript to something like:
$().ready(function() {
$(".input").each(function(i) {
$(this).find(".add").click(function() {
var container = $(this).closest(".input");
container.find(".selectA
option:selected").appendTo(container.find(".selectB"));
});
$(this).find(".remove").click(function() {
var container = $(this).closest(".input");
container.find(".selectB
option:selected").appendTo(container.find(".selectA"));
});
});
});

See it in action here: http://jsbin.com/osipu/edit

Nathan