Optimize JQuery/JavaScript Link Checker Below is a script I've written that uses AJAX to check if all links on the page are alive or dead. Could this be modified to be more efficient in any way? Thank you very much.

$(document).ready(function() {
    var liveLinks = [];
    var deadLinks = [];

    function updateLive() {
        $live = Number($('#liveLinkCount').text()) + 1;
        $('#liveLinkCount').text($live);
    }

    function updateDead() {
        $dead = Number($('#deadLinkCount').text()) + 1;
        $('#deadLinkCount').text($dead);
    }

    $('body').prepend("&lt;div id='linkChecker'&gt;&lt;span id='hideChecker'&gt;Hide&lt;/span&gt;&lt;button id='checkLinks'&gt;Check Links&lt;/button&gt;&lt;br /&gt;&lt;span&gt;Live: &lt;/span&gt;&lt;span id='liveLinkCount' style='color:green;'&gt;0&lt;/span&gt;&lt;span&gt; - Dead: &lt;/span&gt;&lt;span id='deadLinkCount' style='color:red;'&gt;0&lt;/span&gt;&lt;/div&gt;");
    $('#linkChecker').css({
        "width": "130px",
        "border": "1px solid black",
        "text-align": "center"
    });
    $('#hideChecker').css({
        "text-decoration": "underline",
        "float": "right",
        "padding": "1px",
        "cursor": "pointer"
    });
    $('body').on('click', '#checkLinks', function() {
        $('#linkChecker').append("&lt;br /&gt;&lt;button id='logReport'&gt;Log Report&lt;/button&gt;");
        $('a').each(function(i) {
            var self;
            self = this;
            $.ajax({
                type: "post",
                url: $(self).prop('href'),
                success: function() {
                    liveLinks.push($(self).prop('href'));
                    updateLive();
                    $(self).css({
                        "color": "green"
                    });
                },
                error: function() {
                    deadLinks.push($(self).prop('href'));
                    updateDead();
                    $(self).css({
                        "font-weight": "bold",
                        "color": "red"
                    });
                }
            });
        });
    });
    $('body').on('click', '#logReport', function() {
        console.log(new Array(24 + 1).join('\n'));
        console.log("Live Links:");
        for (var i in liveLinks) {
            console.log("  " + liveLinks[i]);
        }
        console.log("Dead Links:");
        for (var i in deadLinks) {
            console.log("  " + deadLinks[i]);
        }
    });
    $('body').on('click', '#hideChecker', function() {
        $('#linkChecker').fadeOut();
    });
});
Firstly, for...in is used to enumerate over object properties, not to iterate through arrays.  You should use a traditional for loop for this.

Secondly, you could probably refine your console logging portion a bit. It may not have any impact to application performance, but it would make your console look prettier.

$('body').on('click', '#logReport', function() {
    var i, j, k, l;

    console.group("Live Links:");
    for (i=0, j=liveLinks.length; i&lt;j; i++) {
        console.log(liveLinks[i]);
    }
    console.groupEnd();
    console.group("Dead Links:");
    for (k=0, l=deadLinks.length; k&lt;l; k++) {
        console.log(deadLinks[k]);
    }
    console.groupEnd();
});


As far as I know, this works for both Google Chrome and Mozilla Firefox (FireBug).  See here for more information.