javascript - 使用 jQuery 检查链接是否仍然有效

Question

我做了一个快速功能，使用 AJAX 检查页面上的每个链接，看看它们是否仍然有效。这似乎有效，但它为每个人添加了成功和错误类。如果 AJAX 响应为 404，如何让错误回调函数仅抛出？

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

Answer 1

和success参数error期望函数。

您需要将代码包装在匿名函数中：

//there's no need to complicate 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.
        }
    });
});

否则，您只是设置success为 的返回值$(this).addClass('success');，这只是一个 jQuery 集合。

Answer 2

首先，您需要一个成功和失败的处理程序，现在代码只针对每个链接运行。您不需要 src 属性，而是 href 属性。

这应该有效：

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

我还发现在每个循环中使用索引和值更优雅，所以：

$('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')}
    })
  })
});

Answer 3

您需要将成功和错误回调包装在function()调用中：

$('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');
            }
        });
    });
});

Answer 4

其他答案为所有错误添加了类，如果您真的404只想要它，那么这应该这样做：

$(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');
           }
        }
    });
});