在新的 div 中克隆或附加变量？答案

【问题标题】：clone or append a variable in a new div?在新的 div 中克隆或附加变量？
【发布时间】：2018-05-15 17:23:33
【问题描述】：

我有这个 Html <h1 class="count" role="status">Search results 546</h1>

我正在尝试仅克隆该 div 的数字“546”并将其显示在另一个 div 'h2.count'中

我设法通过以下方式仅调用警报中的数值：

var price = $('h1.count').text();
var parsedPrice = parseFloat(price.replace(/([^0-9\.])/g, ''));
     alert(parsedPrice.toFixed(0));

否则，当我尝试让它显示在 div h2.count 而不是警报时，它不起作用。

我尝试了以下方法：

var price = $('h1.count').text();
var parsedPrice = parseFloat(price.replace(/([^0-9\.])/g, ''));
$parsedPrice.appendTo('h2.onlycount');

有没有想过我做错了什么？

非常感谢大家！

【问题讨论】：

您的h1 没有count 类。
抱歉忘记了，但它确实在 h1 中有计数类，它显示在警报中。我没有设法将它放在另一个 div 中。 .
您能否使用<> 制作一个有效的sn-p 来演示您的问题？
$parsedPrice 不存在（并且 parsedPrice 是一个没有 appendTo() 的浮点数）。你会想要大致类似于 $('').text(parsedPrice).appendTo('h2.onlycount') 的东西，但这会给你一个额外的 span 元素来包装计数。
或者你可以简单地这样做： $('h2.onlycount').text(parsedPrice) 如果你只想要那里的价格。

标签： javascript jquery append clone

【解决方案1】：

我猜你的两个 html 元素是独一无二的，所以使用 id 而不是类（和本机 js），试试这个：

html：

<h1 id="count">Search results 541</h1>
<h2 id="onlycount"></h2>

js：

var price = document.getElementById('count').innerText;
var parsedPrice = parseFloat(price.replace(/([^0-9\.])/g, ''));
document.getElementById('onlycount').innerText = parsedPrice;

https://jsfiddle.net/f3rj2bnv/

如果您想继续使用 jQuery（如果您想或必须在 html 元素中使用类而不是 id，请将“#”替换为“.”）：

var price = $('h1#count').text();
var parsedPrice = parseFloat(price.replace(/([^0-9\.])/g, ''));
$('h2#onlycount').text(parsedPrice)

【讨论】：

【解决方案2】：

.appendTo()使用的内容应该是

“选择器表达式或动态创建的标记”

因为在你的例子中两者都不是真的，试试这个：

var price = $('h1.count').text();
var parsedPrice = parseFloat(price.replace(/([^0-9\.])/g, ''));
$('h2.onlycount').text(parsedPrice);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 class="count" role="status">Search results 546</h1>
<h2 class="onlycount" role="status"></h1>

【讨论】：

【解决方案3】：

可以使用text(function)

$('h2.onlycount').text(function(_, existingText){
   return existingText + $('h1.count').text().replace(/([^0-9\.])/g, '');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="count" role="status">Search results 546</h1>
<h2 class="onlycount"></h2>

【讨论】：