Question

我正在尝试使用jquery来克隆列表。像这样：

<div class="copy-me">
  <!-- dimensions in Inches -->
  <a href="11x14.html" class="list-group-item" slug="11x14">11x14 Inches</a>
  <a href="18x24.html" class="list-group-item" slug="18x24">18x24 Inches</a>
  ...etc
</div>
<div class="paste-here">
  <!-- generate, clone dimensions in CM -->
</div>

我的清单包括许多尺寸，以英寸（纸张尺寸）为单位。我使用一些数学将英寸更改为厘米。数学很简单。

我遇到的问题是将此列表克隆（我使用属性'slug'来获取纯文本尺寸>执行数学运算>克隆列表）到名为.paste_here的新div中。当我粘贴时，它还会编辑同一页面上单独列表的值。

如何仅对要克隆的项目专门运行数学运算？

到目前为止，这是我的代码：

var $theClone = $(".copy-me").clone();
$theClone.find('a').each(function() {
  var selctedSizeB = $theClone.find(this).attr('slug');
  var selctedSizeArrayB = selctedSizeB.split('x');
  var heightCM = (Math.round(selctedSizeArrayB[0] / 0.39370));
  var widthCM = (Math.round(selctedSizeArrayB[1] / 0.39370));

  $("a[slug='" + $(this).attr('slug') + "']").text(heightCM + "×" + widthCM +"cm");
});     
$(".paste-here").html($theClone);

我还需要合并一个.replace('-', '.')的实例，我的一些子弹显示的尺寸带有连字符而不是句点，这会破坏数学。任何指针最欢迎。

Answer 1

我只是将添加代码替换为each（）函数，以便在设置新文本之前添加新标签。另外，为了定义位于哪个div元素中的标记，我更改了代码$("a[slug='" + $(this).attr('slug') + "']").text(heightCM + "×" + widthCM +"cm"); 为此：$(this).parent().find("a[slug='" + $(this).attr('slug') + "']").text(heightCM + "×" + widthCM +"cm"); 最终代码：

$(document).ready(function() {
    $(document).on("click", "#btn", function(){
      $theClone = $(".copy-me").clone().removeClass('copy-me');

      $theClone.find('a').each(function() {
        $(".paste-here").append($(this).parent());
        var selctedSizeB = $(this).attr('slug');
        var selctedSizeArrayB = selctedSizeB.split('x');
        var heightCM = (Math.round(selctedSizeArrayB[0] / 0.39370));
        var widthCM = (Math.round(selctedSizeArrayB[1] / 0.39370));

        $(this).parent().find("a[slug='" + $(this).attr('slug') + "']").text(heightCM + "×" + widthCM +"cm");
      });
    });

	});

<div class="copy-me">
  <!-- dimensions in Inches -->
  <a href="11x14.html" class="list-group-item" slug="11x14">11x14 Inches</a>

  <a href="18x24.html" class="list-group-item" slug="18x24">18x24 Inches</a>
</div>
<div class="paste-here">
  <!-- generate, clone dimensions in CM -->
</div>
<button id="btn">clone</button>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

克隆维度列表并在克隆上进行数学运算

1 个答案: