jquery - 尝试将两个跨度与 jQuery 结合在一起，需要帮助循环/迭代

Question

我认为这是一个非常菜鸟的问题，但我现在已经考虑了很多小时，我就是想不通。

我需要在下面获取这个 html 代码并获取 .project_name 跨度和 .location 跨度以合并到同一个跨度中。

<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>​

我有这个 jQuery 代码，可以正确处理第一组跨度，但会继续使用第一个跨度的内容来填充其余部分。

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

我假设我需要使用 .each() 或类似的东西，但我无法弄清楚使其工作的正确语法。这是迄今为止我所拥有的 jsFiddle 。

有任何想法吗？这可能很简单。

Answer 1

如果你想保留<span>标签......（小提琴）

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

在这里，如果你不想保留<span>标签......（小提琴）

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

这当然可以通过遍历.project_name跨度来完成，我只是更喜欢这样做，.location因为这是我们实际保留的内容。

当您这样做时，$("selector").each(function() { });您可以使用$(this)来获取当前正在迭代的对象。

Answer 2

尝试这个 ：

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

Answer 3

这应该工作

var spantext="";

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

Answer 4

如果你想使用你的代码和平：

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

如果不是，我更喜欢这段代码（更清楚发生了什么，我认为可读性很重要）：

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