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 DoeJane Doe的附加信息
Jane Doe 简喜欢打篮球 John DoeJane Doe的附加信息

这是理想的结果：

John Doe
约翰是一名优秀的游泳选手 John Doe的附加信息
Jane Doe 简喜欢打篮球 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对象。

Answer 2

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

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

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

2 个答案: