Question

On page load, I want to wrap the header span with div and move it into the front of related body div.
ie, move hApplicant1 span into the front of tabApplicant1 div, etc.

How do I write jQuery to accomplish this? thanks !

Given:

<div>
            <div id="header">
                <span id="hDummy"></span>
                <span id="hApplicant1">James Smith</span>
                <span id="hApplicant2">John Doe</span>
                <span id="hApplicant3"></span>
                <span id="hApplicant4"></span>
            </div>
            <div id="body">
                <div id="tabApplicant1">...</div>
                <div id="tabApplicant2">...</div>
            </div>
</div>
<div>
            <div id="header2">
                <span id="h2Dummy"></span>
                <span id="h2Applicant1">Black Smith</span>
                <span id="h2Applicant2">Shoe Maker</span>
                <span id="h2Applicant3"></span>
                <span id="h2Applicant4"></span>
            </div>
            <div id="body2">
                <div id="tab2Applicant1">...</div>
                <div id="tab2Applicant2">...</div>
            </div>
</div>

the result should be like this:

<div>
            <div id="header">
                <span id="hDummy"></span>
                <span id="hApplicant3"></span>
                <span id="hApplicant4"></span>
            </div>
            <div id="body">
                <div><span id="hApplicant1">James Smith</span></div>
                <div id="tabApplicant1">...</div>
                <div><span id="hApplicant2">John Doe</span><div>
                <div id="tabApplicant2">...</div>
            </div>
</div>
<div>
            <div id="header2">
                <span id="h2Dummy"></span>
                <span id="h2Applicant3"></span>
                <span id="h2Applicant4"></span>
            </div>
            <div id="body2">
                <div><span id="h2Applicant1">Black Smith</span></div>
                <div id="tab2Applicant1">...</div>
                <div><span id="h2Applicant2">Shoe Maker</span><div>
                <div id="tab2Applicant2">...</div>
            </div>
</div>

Answer 1

var $bodyDiv = $('#body');

$('#header span[id^=hApplicant]').each(function(){
    $bodyDiv.find('div[id=' + $(this).attr('id').replace('h', 'tab') + ']').before( $(this).wrap('<div />').parent() );
});

And here’s the fiddle: http://jsfiddle.net/Hw2Gz/

This can be further simplified (and optimized), but it should get you started on the right track.

---

EDIT:

This can be repeated:

var $bodyDiv = $('#body'),
    $bodyDiv2 = $('#body2');

$('#header span[id^=hApplicant]').each(function(){
    $bodyDiv.find('div[id=' + $(this).attr('id').replace('h', 'tab') + ']').before( $(this).wrap('<div />').parent() );
});

$('#header2 span[id^=h2Applicant]').each(function(){
    $bodyDiv2.find('div[id=' + $(this).attr('id').replace('h', 'tab') + ']').before( $(this).wrap('<div />').parent() );
});

http://jsfiddle.net/Hw2Gz/1/