javascript - Use jQuery to check if links still work - Stack Overflow

admin管理员组

文章数量:1310043

I made a quick function to check every link on the page using AJAX to see if they still work. This seems to be working, but it's adding the success and error class to every one. How can I get the error callback function to only throw if the AJAX response is 404?

$('li').each(function(){
    $(this).children('a').each(function(){
        $.ajax({
            url:$(this).attr('src'),
            success:$(this).addClass('success'),
            error:$(this).addClass('error')
        })
    })
});

I made a quick function to check every link on the page using AJAX to see if they still work. This seems to be working, but it's adding the success and error class to every one. How can I get the error callback function to only throw if the AJAX response is 404?

$('li').each(function(){
    $(this).children('a').each(function(){
        $.ajax({
            url:$(this).attr('src'),
            success:$(this).addClass('success'),
            error:$(this).addClass('error')
        })
    })
});

• javascript
• jquery
• ajax
• http-status-code-404

Share Improve this question Follow edited Nov 9, 2012 at 14:54 Ruben-J 2,6931616 silver badges3333 bronze badges asked Nov 9, 2012 at 14:36 ThrottleheadThrottlehead 1,94566 gold badges2222 silver badges3737 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

the success and error parameters expect functions.

You'd need to wrap the code in an anonymous function:

//there's no need to plicate things, use one call to each()
$('li > a').each(function () {
    var $this;
    $this = $(this); //retain a reference to the current link
    $.ajax({
        url:$(this).attr('href'), //be sure to check the right attribute
        success: function () { //pass an anonymous callback function
            $this.addClass('success');
        },
        error: function (jqXHR, status, er) {
            //only set the error on 404
            if (jqXHR.status === 404) { 
                $this.addClass('error');
            }
            //you could perform additional checking with different classes
            //for other 400 and 500 level HTTP status codes.
        }
    });
});

Otherwise, you're just setting success to the return value of $(this).addClass('success');, which is just a jQuery collection.

First you need a success and failed handler, now the code just runs for every link. You don't need the src attribute, but the href prop.

This should work:

$('li').each(function(){
   $(this).children('a').each(function(){
    $.ajax({
        url:$(this).prop('href'),
        success:function(){$(this).addClass('success')},
        error:function(){$(this).addClass('error')}
    })
  })
});

I also find it more elegant to use index and value in the each loop, so:

$('li').each(function(){
   $(this).children('a').each(function(index,value){
    $.ajax({
        url:$(value).prop('href'),
        success:function(){$(value).addClass('success')},
        error:function(){$(value).addClass('error')}
    })
  })
});

The other answers add the class for ALL errors, if you truly want it for a 404 only then this should do:

$(this).children('a').each(function(){
    var self;
    self = this; //retain a reference to this
    $.ajax({
        url:$(this).attr('src'),
        success: function () { //pass an anonymous callback function
            $(self).addClass('success');
        },
        statusCode: {
           404: function() {
              $this.addClass('error');
           }
        }
    });
});

You need to wrap your success and error callbacks inside a function() call:

$('li').each(function(){
    $(this).children('a').each(function(){
        var $this = $(this);
        $.ajax({
            url:$this.attr('href'),
            success: function() {
                $this.addClass('success');
            },
            error: function() {
                $this.addClass('error');
            }
        });
    });
});

本文标签： javascriptUse jQuery to check if links still workStack Overflow