迭代每个测验 Jquery答案

【问题标题】：Iterating with Each Quiz Jquery迭代每个测验 Jquery
【发布时间】：2017-09-20 14:07:16
【问题描述】：

$('p').each(function (index) {
  var letters = $(this).text().length;
 $('p').appendTo('<span> Here is ' + letters + '</span>');
});

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

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet vel fugit repellendus, magni blanditiis delectus autem dicta, omnis odit beatae iusto asperiores, iste. Delectus, eaque reiciendis quibusdam cupiditate molestias officia perspiciatis corporis cumque saepe voluptatem, magnam magni asperiores a!</p>

你好，我将非常感谢我的代码的任何帮助，我需要计算每个 <p> 标签的所有字母并将其显示在 <p> 标签的末尾，但我的代码计算所有 <p> 标签我在页面上将其放在每个页面上，任何人都可以给我建议是什么。错误以及如何解决它，非常感谢您

【问题讨论】：

为此使用此上下文。而不是$('p') 使用$(this)
非常感谢先生！我刚刚开始编程，很难理解这到底是什么意思

标签： javascript jquery loops append each

【解决方案1】：

因为$('p') 会在页面中找到每个<p>，就像您使用它来设置初始查询一样

您想要 each 中的特定实例 $(this) 并且您想要 append() 而不是 appendTo()

$('p').each(function (index) {
  var letters = $(this).text().length;
  $(this).append('<span style="color:red"> Here is ' + letters + '</span>');
});

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

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet vel fugit repellendus, magni blanditiis delectus autem dicta, omnis odit beatae iusto asperiores, iste. Delectus, eaque reiciendis quibusdam cupiditate molestias officia perspiciatis corporis cumque saepe voluptatem, magnam magni asperiores a!</p>

【讨论】：

非常感谢先生！我刚刚开始编程，很难理解这到底是什么意思
如有疑问...查看 api 中的示例和详细信息...api.jquery.com/each

【解决方案2】：

$('p').each(function (index) {
  $('<span></span>',{text :  " Here is " + $(this).text().length + ""}).css({color:'blue'}).appendTo(this);
});

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

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet vel fugit repellendus, magni blanditiis delectus autem dicta, omnis odit beatae iusto asperiores, iste. Delectus, eaque reiciendis quibusdam cupiditate molestias officia perspiciatis corporis cumque saepe voluptatem, magnam magni asperiores a!</p>

【讨论】：