Hey there,
You could try the following:
$(document).ready(function() {
$("ul li").each(function() {
var thisName = $('.name', this).text(); // get the content inside
'.name' class of this element
$(this).append('<span class="additional"><a href="addinfo.php">'+
thisName +"'s additional Info</a></span>" );
});
});
With your approach of $('.name').text(), it was getting the contents
of all the span that had 'name' class. so you where getting 'John
DoeJane Doe's'.. in the output.
Also a suggestion: perhaps you may consider adding an id or class for
the "ul" tag (and also modify JS accordingly), in that way it won't
grab all the "ul li" on the page.
I hope this helps,
Thanks,
Abdullah
On May 13, 3:00 pm, Troy <mr.troypeter...@gmail.com> wrote:
> Hello,
>
> 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 <span> 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:
>
> My jquery code:
> ---------------------------------------------------------------------
> $("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:
> ---------------------------------------------------------------------
> <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
>
> Jane Doe
> Jane loves to play basketball
> John DoeJane Doe's additional info
>
> Here's the desired outcome:
> ---------------------------------------------------------------------
> John Doe
> John is an excellent Swimmer
> John Doe's additional info
>
> Jane Doe
> Jane loves to play basketball
> Jane Doe's additional info
>
> 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.
>
> Can someone help?
> Thanks!
> Troy
