Question

I think this is a pretty noob question, but I’ve thought about it for many many hours straight now, and I just can’t figure it out.

I need to take this html code below and get the .project_name span & the .location span to merge into the same span.

<ol id="projects" class="wide">
<li class="dontsplit" id="1234">
    <a href="/projects/1234" class="thickbox dontsplit">
        <span class='project_name dontsplit'>First Project Name</span>
        <span class='location dontsplit'>Combined with First Location</span>
        <span class='extra-info-span1'></span>
    </a>
</li>
<li class="dontsplit" id="1233">
    <a href="/projects/1233" class="thickbox dontsplit">
        <span class='project_name dontsplit'>Second Project Name</span>
        <span class='location dontsplit'>Combined with Second Location</span>
        <span class='extra-info-span2'></span>
    </a>
</li>
<li class="dontsplit" id="1232">
    <a href="/projects/1232" class="thickbox dontsplit">
        <span class='project_name dontsplit'>Third Project Name</span>
        <span class='location dontsplit'>Combined with Third Location</span>
        <span class='extra-info-span3'></span>
    </a>
</li>
</ol>​

I have this jQuery code that will do it correctly for the first set of spans, but will continue to use the first span’s contents to fill in the rest of them.

var s1 = $('.project_name').html();
$('.project_name').remove();
$('.location').prepend(s1 + ' ');

I assume I need to use .each() or something similar, but I can’t figure out the correct syntax to make it work. Here’s a jsFiddle with what I have so far.

Any ideas? It’s probably pretty simple.

Answer 1

If you want to keep the <span> tags… (fiddle)

$(".location").each(function() {
   $(this).prepend(" ").prepend($(this).prev());
});

And here, if you don’t want to keep the <span> tags … (fiddle)

$(".location").each(function() {
    $(this).prepend($(this).prev().text() + " ");
    $(this).prev().remove();
});​

This could of course be done by looping over the .project_name spans instead, I just prefer doing it with .location since that is what we’re actually keeping around.

When you do $("selector").each(function() { }); you can use $(this) to get to the object currently being iterated over.