Jquery-使用同一类获取多个跨距的文本？

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

<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>

$（“ul”）.ready（函数（）{
变量名称=$（“.Name”）.text（）；
var Content=$（“.Content”）.text（）；
$（“li”）。追加（“”）；
});

需要修改的原始HTML:

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

<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>

约翰·多伊

约翰是一位优秀的游泳运动员



无名氏

简喜欢打篮球

这是我得到的输出：

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

<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 Jane Doe的其他信息

• 无名氏
  简喜欢打篮球
  John Doe Jane Doe的传统信息

以下是期望的结果：

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

<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的附加信息

• 无名氏
  简喜欢打篮球
  Jane Doe的其他信息

正如您所看到的，不要将所有的“Name”变量放在一起，而不要只使用该行项目的“Name”变量。 我确信它需要某种类型的this，$（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>");
});

$（“ul>li”）。每个（函数（）{
var Name=$（“.Name”，this）.text（）；
var Content=$（“.Content”，this）.text（）；
$（此）。追加（“”）；
});

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

就在这里：

我会给所有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>");
});

$（“.li类”）。每个（函数（）{
var Name=$（“.Name”，this）.text（）；
var Content=$（“.Content”，this）.text（）；
$（此）。追加（“”）；
});

在.append行上，是否要将其称为$（this）而不是$（“li”）？函数中的很棒的llama（）

此

将引用

li

元素Nope，这不起作用。。。或者用$（this）或者$（“li”）实际上。。。这确实有效，我在复制和粘贴时意外删除了上面的.ready调用。谢谢事实上，我也让它工作了。。。在最后一行代码中，我将其替换为$（this）。