Question

I’m stuck with this kinda stupid problem. I saw examples of my problem, but it seems I can’t find correct loop. In any case, I’ll better provide examples:

<table border="1" id="inline" class="<?=$id?>" style="background:none;">
    <tr id="border<?=$id?>">
        <td rowspan="2" style="max-width:420; width:420" valign="top">
            <form id="feedback<?=$id?>" <? if(!$check){?>style="display:none"<? }?>>
                <textarea cols="40" class="editor" id="editor<?=$id?>" name="editor1" rows="10"><?=$text?></textarea>
                <table style="background:none"><tr><td><input type="button" value="Save" id="submit<?=$id?>"></td><td><img id="spinner<?=$id?>" height="25" style="display:none"></td></tr></table>
            </form>
            <div id="content<?=$id?>"<? if($check){?> style="display:none"<? }?>><?=$text?></div>
        </td>
        <td style="border-width:0">
            Title:<br>
            <div id="title_div<?=$id?>"<? if($check){?> style="display:none"<? }?>><?=$title?></div><input type="text" id="title<?=$id?>" value="<?=$title?>"<? if(!$check){?> style="display:none"<? }?>>
        </td>
    </tr>
    <tr>
        <td style="border-width:0" valign="top">
            <div id="uploader<?=$id?>"<? if(!empty($img)){?> style="display:none<? }?>">
                <input id="upload<?=$id?>" name="upload" type="file" />
            </div>
            <div id="div_holder<?=$id?>">
            <? draw_buttons($id);?>
            <a title="<?=$title?>" <? if(!empty($img)){?> href="images/people/<?=$img?>"<? }?> id="feedback_img<?=$id?>" class="lightbox"><img border="0"<? if(!empty($img)){?> src="images/people/timthumb.php?src=<?=$img?>&w=200&q=100"<? }else{?> style="display:none"<? }?> id="img_holder<?=$id?>"></a></div><img id="jcrop<?=$id?>" style="display:none" />
        </td>
    </tr>
</table>

This is a part of my php script where $id is taken from database. Ids are numeric, so all table ids differ only with a number, eg.:

<tr id="border1">
//next table tr
<tr id="border2">

All tables are taken from database and shown within a loop. Ids can be deleted, so their order could be 1,3,4,6 and so on. But there’s one hidden table with known $id = ‘zero’, eg.:

<tr id="borderzero">

There’s also div element with id zero, within which shown above table is situated. So my problem is – I need to change id of each element within that div with id zero, eg.:

<tr id="borderzero">
//change to
<tr id="border5">

Of course I can just type them one by one, but I’m trying with the .each function, though I fail and I hope I’ll get some help. Here’s what I came with:

$("div#zero").clone().attr({'id' : feedback_id}).appendTo("#temp_holder").fadeIn('slow');
$('#' + feedback_id + ":not(td)").contents().each(function() {
        if($("[id*='zero']").length > 0){
                var new_id = $(this).attr('id');
                new_id = new_id.replace('zero', some_id);
                $(this).attr({'id' : new_id});
            }
    });

Var feedback_id through ajax taken from database and it’s value is last table id +1.

Answer 1

Okay I found a way to actually get all the elements. First answer was helpful, thank you, but also had to change .contents() to .find(‘*’). So the working script looks like this if somebody would require it:

$("div#zero").clone().attr({'id' : feedback_id}).appendTo("#temp_holder").fadeIn('slow');
$('#' + feedback_id + ":not(td)").find('*').each(function() {
        if(this.id.match(/zero$/ig)){
                var new_id = $(this).attr('id');
                new_id = new_id.replace('zero', some_id);
                $(this).attr({'id' : new_id});
            }
    });