jQuery - 将每个 html() 类值设置为另一个元素

Question

我有以下代码:-

HTML

<div id="nottingham-park-wrapper">
  <div id="notts-main-court" class="icon-wrapper">
    <span class="park-marker"></span>
  </div>
  <span id="notts-main-court-info" class="notts-info">
  <h2 class="infobox-title">TITLE 1</h2>
  <p class="infobox-desc">TEXT INFO 1</p>
  </span>
  <div id="notts-dodgeball" class="icon-wrapper">
    <span class="park-marker"></span>
  </div>
  <span id="notts-dodgeball-info" class="notts-info">
  <h2 class="infobox-title">TITLE 2</h2>
  <p class="infobox-desc">TEXT INFO 2</p>
  </span>
</div>

<hr>

<span class="mobile-notts-info"></span>

jQuery

    jQuery(".notts-info").each(function(index) {
      var notts_info = jQuery(this).html();
      jQuery(this).html('');
      jQuery(".mobile-notts-info").html(notts_info);
    });

VIEW JSFIDDLE

基本上我想将每个 .notts-info html 移动到 .mobile-notts-info

目前它只是移动每个循环中的最后一个值，如何获取所有值？ (本例中只有 2 个，实际版本中还有很多，这就是为什么我想使用每个元素而不是单独执行每个元素)

提前致谢!

Answer 1

.html() 删除现有内容并添加新内容。因此，目标父级中只有最后一个内容可用。您需要使用 .append() 而不是 .html() 来保留现有内容并将新内容附加为父级的最后一个子级:

jQuery(".mobile-notts-info").append(notts_info);

<强> Working Demo

但是您不需要迭代元素，您可以将代码减少为:

jQuery(".mobile-notts-info").append(jQuery(".notts-info"));

<强> Optimised Code working Demo