Jquery - 获取具有相同类的多个跨度的文本？

Question

我对jquery比较陌生,所以我希望这是一个简单的问题.我需要将多个跨度附加到无序列表中的行项目.
基本上,每个订单项都包含一个,我需要抓取该范围的内容并将其附加到其所包含的订单项的底部.这是我到目前为止的内容:

我的jquery代码:

  $("ul").ready(function(){
    var Name = $(".name") .text();
    var Content = $(".content") .text();
    $("li") .append("<span class=\"additional\"><a href=\"/addinfo.php\">"+ Name +"'s additional info</a></span>"); 
 });

需要修改的原始HTML:

<ul>
  <li>
  <span class="name">John Doe</span><br />
  <span class="content">John is an excellent Swimmer</span><br />
  </li>
  <li>
  <span class="name">Jane Doe</span><br />
  <span class="content">Jane loves to play basketball</span><br />
  </li>
</ul>

这是我得到的输出:

• John Doe
  John是一位出色的游泳选手
  John DoeJane Doe的附加信息

• Jane Doe
  Jane喜欢打篮球
  John DoeJane Doe的另外信息

这是期望的结果:

• John Doe
  John是一名优秀的游泳选手
  John Doe的附加信息

• Jane Doe
  Jane喜欢打篮球
  Jane Doe的额外信息

正如您所看到的,不是仅使用所有"名称"变量并将它们放在一起,而不是仅仅使用该行项目的"名称"变量.我确定它需要某种类型的这个,$(this)或.each调用它,但我似乎无法在任何地方的文档中找到它.

有人可以帮忙吗？谢谢!特洛伊

Answer 1

试试这个

$("ul > li").each(function() {
    var Name = $(".name", this) .text();
    var Content = $(".content", this) .text();
    $(this).append("<span class=\"additional\"><a href=\"/addinfo.php\">"+ Name +"'s additional info</a></span>");
});

这将循环遍历UL列表中的每个LI并将它们视为单独的实体.你有两个主要问题.一个是你没有限制你的jQuery选择的上下文,所以你得到两个".name"类并将它们组合在一起,这就是为什么你有两个名字.然后你将值添加到所有LI对象.