CODEWITHSUNDEEP
jqueryloopsmergeiterationeach
necknile
necknile

Reputation: 25

Trying to combine two spans together with jQuery, need help looping/iterating

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.

Upvotes: 1

Views: 1429

Answers (4)

Anders Arpi
Anders Arpi

Reputation: 8397

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.

Upvotes: 2

Danil Speransky
Danil Speransky

Reputation: 30453

If you want to use your peaсe of code:

$('.dontsplit').each (function () {
  var html = $('.project_name', this).html();
  $('.project_name', this).remove();
  $('.location', this).prepend(s1 + ' ');
});

If not I prefer this code (it is more clear what there is going on, and I think readability is important):

$('.dontsplit').each (function () {
  var text_1 = $('.project_name', this).text();
  var text_2 = $('.locaton', this).text();

  $('.project_name', this).remove()
  $('.locaton', this).remove();

  var text = text_1 + text_2           
  $('<span></span>').text(text_1 + text_2).appendTo(this);
});

Upvotes: 0

dratewka
dratewka

Reputation: 2114

Try this :

$('.project_name').each(function(el){
 var s1 = el.html();
 el.remove();
 $(el.parent(),'.location').prepend(s1 + ' ');
})

Upvotes: 0

Sven Bieder
Sven Bieder

Reputation: 5681

this should work

var spantext="";

spantext += $('.project_name').text() + ", " + $('.location').text();
$('.project_name').remove();
$('.location').text(spantext);

Upvotes: 0

Related Questions