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>

Вот вывод, который я получаю:

• Джон Доу
  Джон отличный пловец
  Дополнительная информация о Джоне Доу Джейн Доу

• Джейн Доу
  Джейн любит играть в баскетбол
  Дополнительная информация о Джоне Доу Джейн Доу

Вот желаемый результат:

• Джон Доу
  Джон отличный пловец
  Дополнительная информация Джона Доу

• Джейн Доу
  Джейн любит играть в баскетбол
  Дополнительная информация Джейн Доу

Как видите, вместо того, чтобы брать все переменные "Name" и собирать их вместе, вместо того, чтобы просто использовать переменную "Name" этой позиции. Я уверен, что для этого нужен какой-то тип вызова $ (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>");
});

Это будет циклически проходить через каждый LI в списке UL и рассматривать их как отдельные объекты. У вас было две основные проблемы. Во-первых, вы не ограничивали контекст своего выбора 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>");
});