Intentando combinar dos tramos con jQuery, necesito ayuda para repetir/iterar

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 un jsFiddle con lo que tengo hasta ahora.

Any ideas? It's probably pretty simple.

preguntado el 31 de julio de 12 a las 15:07

4 Respuestas

Si quieres mantener el <span> tags... (violín)

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


And here, if you no quiero mantener el <span> tags ... (violín)

$(".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.

Cuando tu lo hagas $("selector").each(function() { }); puedes usar $(this) to get to the object currently being iterated over.

Respondido 01 ago 12, 08:08

Makes me glad to hear. Good luck! - Anders Arpi

Esto debería funcionar

var spantext="";

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

Respondido 31 Jul 12, 15:07

Pruebe lo siguiente:

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

Respondido 31 Jul 12, 15:07

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 limpiar what there is going on, and I think legibilidad es importante):

$('.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);
});

Respondido 31 Jul 12, 15:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.