jquery, cloning issue and keeping unique ids!

I decided to use jquery to create the duplicate of dropdown menus instead of using my perl script. I have come to an issue.

I have a series of drop boxes that I clone multiple times. The structure is like this:

<div id="org_dropmenus_asdf">
    <table border="0">
    <tr>
    <td valign="top">
        <select name="wimpy_asdf_1" id="wimpy_asdf_1" size="4">
          <option value='1'>1</option>
          <option value='2'>2</option>
        </select>;
    </td>
    <td valign="top">
        <select name="monkey_asdf_1" id="monkey_asdf_1" size="4">
          <option value='c'>c</option>
          <option value='d'>d</option>
        </select>;    
    </td>
            </tr>
            <开发者_如何学编程/table><p>
    </div>|;

I clone var $cloneDiv = $('#org_dropmenus_asdf').clone();

How can search and replace the asdf_1 ("1") and increment with new values?

You need to do something along the lines of this:

var counter = 1;
$cloneDiv = $('#org_dropmenus_asdf').clone().find('[id]').attr('id', function(idx, oldId){
    return oldId.substr(0, -1) + counter;
}).attr('name', function (idx, oldName) {
    return oldName.substr(0, -1) + counter;
});

You could do this repeatedly, incrementing counter each time. Note that this code will only work up to 9, because it removes the last character; more characters need to be removed above 10.

Note also that this doesn't change the org_dropmenus_asdf id attribute, which also needs to be changed for a valid DOM.

function incrementId(idString) {

    // split it at the underscore
    var pieces = idString.split("_");

    // if there is a fourth element, then it just needs incrementing
    if (pieces[3]) {
        pieces[3] = parseInt(pieces[3]) + 1;

    // if not, then it needs to be added
    } else {
        pieces[3] = "1";
    }

    // reconstruct the ID by joining with the underscore character
    return pieces.join("_");
}

$cloneDiv = $('#org_dropmenus_asdf').clone();

// get the ID of the last 'org_dropmenus_asdf' div and increment
var lastDivId = incrementId($("div[id^=org_dropmenus_asdf]:last").attr("id"));

// get the IDs of the contained select elements, and increment
var selectIds = $("div[id^=org_dropmenus_asdf]:last select").map(function() {
    return incrementId(this.id);
}).get();

alert(lastDivId);
alert(selectIds);

Partial demo + proof of concept: http://jsfiddle.net/karim79/fL9ve/2/

Here's another way of overcoming this issue. I use the id and name in as an array so it make it easier to post to PHP and process without too much effort. This ties up two field names to I can link them when I post. it's a select and a text field. This happens after I've appended a clone.

var newid = Number($('.table_id').last().find(':text').attr('id').substr(-2,1)) + 1;

$('.table_id').last().find(':text').attr('id','detailValue['+newid+']').attr('name','detailValue['+newid+']');
$('.table_id').last().find(':select').attr('id','detailValue['+newid+']').attr('name','detailValue['+newid+']');