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

Posted 2023-03-16

【中文标题】尝试将两个跨度与 jQuery 结合在一起，需要帮助循环/迭代

【英文标题】：Trying to combine two spans together with jQuery, need help looping/iterating

【发布时间】：2012-07-29 08:42:37

【问题描述】：

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

我需要使用下面的这段 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 代码可以正确处理第一组 span，但会继续使用第一个 span 的内容来填充其余部分。

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

我假设我需要使用 .each() 或类似的东西，但我无法找出正确的语法来使其工作。这是a jsFiddle 到目前为止我所拥有的。

有什么想法吗？这可能很简单。

【参考方案1】：

如果你想保留<span> 标签... (fiddle)

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

在这里，如果您不想要保留<span> 标签... (fiddle)

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

这当然可以通过循环 .project_name 跨度来完成，我只是更喜欢使用 .location 来完成，因为这是我们实际保留的。

当您执行$("selector").each(function() ); 时，您可以使用$(this) 来访问当前正在迭代的对象。

【讨论】：

让我很高兴听到。祝你好运！

【参考方案2】：

如果你想使用你的代码：

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

【参考方案3】：

这应该可以工作

var spantext="";

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

【参考方案4】：

试试这个：

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