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.

回答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.

回答2:

this should work

var spantext="";

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

回答3:

Try this :

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

回答4:

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);
});

来源：https://stackoverflow.com/questions/11742539/trying-to-combine-two-spans-together-with-jquery-need-help-looping-iterating

标签

jquery

loops

merge

iteration

each