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

I'm relatively new to jquery, so I have what I hope will be a simple question. I need to append multiple spans to the line items in an unordered list.
Essentially, each line item contains a and I need to grab the content of that span and append it to the bottom of the line item it's contained in. Here's what I have so far:

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

My jquery code:

我的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>"); 
 });

The original HTML it needs to modify:

需要修改的原始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>

Here's the output I'm getting:

这是我得到的输出:

John Doe
John is an excellent Swimmer
John DoeJane Doe's additional info

John Doe John是一位出色的游泳选手John DoeJane Doe的附加信息
Jane Doe
Jane loves to play basketball
John DoeJane Doe'sadditional info

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

Here's the desired outcome:

这是期望的结果:

John Doe
John is an excellent Swimmer
John Doe's additional info

John Doe John是一名优秀的游泳选手John Doe的附加信息
Jane Doe
Jane loves to play basketball
Jane Doe's additional info

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

As you can see, instead of taking the all the "Name" var's and putting them together, instead of just using the "Name" var of that line item. I'm sure it needs some type of this, $(this), or .each call on it, but I can't seem to find this in the documentation anywhere.

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

Can someone help? Thanks! Troy

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

2 个解决方案

#1

Try this

$("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>");
});

This will loop through each LI in the UL list and treat them as individual entities. You had two major problems. One is that you were not limiting the context of your jQuery selection so you were getting both ".name" classes and combining them together, that is why you got both names. And then you were adding the values to all LI objects.

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

#2

It's right here: http://docs.jquery.com/Core/each#callback

它就在这里:http://docs.jquery.com/Core/each#callback

I would assign a class to all LI elements and then

我会为所有LI元素分配一个类然后

$(".li-class").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>");
});

#1