Question

So I have something like

<ul>
<li> <a href="123.html">123</a></li>
<li> <a href="abc.html">abc</a></li>
</ul>

This sites in my INDEX.HTML file. Except there are loads more lists and list items. Each HTML page that is linked to has a section like this:

<ul>
<li><strong>Time: </strong>12:00</li>
</ul>

What I want is when the user sees the INDEX.HTML page, the time gets added to the end (from the relative link) so it reads like

• 123 – 12:00
• ABC – 13:00

Can someone please help? I realise I might need contents() and fine() but have got nowhere quick. So basically for each link, we go to the URL in question, grab the time and add it the original line on INDEX.HTML

Thanks.

Answer 1

The idea could be as follows:

1. Loop through the lis.
2. Get the href attribute of the a child.
3. Send an ajax request to that page.
4. Parse the response and find the appropriate text using jQuery.
5. Append that text to the li.

On jsFiddle it’s not very easy to generate separate pages, so you’ll have to alter it a bit for your case. Also, you may want to make the selector stricter (ul strong is the best I can make up with your example).

http://jsfiddle.net/3JQDz/

$("li").each(function() {
    var $li = $(this);
    var href = $li.find("a").attr("href");  // use this in your real case

    $.ajax({
        type: "POST",
        url: "/echo/html/",  // this is just the way to use ajax on jsFiddle
        data: {
            html: "<ul><li><strong>Time: </strong>12:00</li></ul>"
        },
        success: function(html) {
            // full document -> only the li -> its child nodes -> the last one (the text node) -> its text
            var time = $(html).find("li").contents().last().text();
            $li.append(" - " + time);
        }
    });
});