jQuery 排除图像的外部链接 - Javascript

在网站开发中，我们常常需要对图像进行处理，而排除图像的外部链接是一个常见需求。本文将介绍如何使用 jQuery 针对图像链接进行排除操作。

获取所有图像链接

首先，我们需要通过 jQuery 获取所有图像链接的元素。可以使用 $('img') 来获取所有 img 元素，也可以使用 $('a img') 来获取所有链接中包含图像的元素。

var $allImages = $('a img');

使用筛选器进行排除操作

接下来，我们需要使用筛选器来排除外部链接。由于外部链接的 href 属性通常包含 http 或 https，因此我们可以使用 :not() 和 $= 选择器来筛选掉包含这些属性的元素。

var $internalImages = $allImages.filter(function() {
  return $(this)
    .parent()
    .attr('href')
    .indexOf(location.hostname) > -1;
});

这段代码中，我们使用了 .filter() 方法来对所有图像链接进行过滤，只保留包含当前页面域名的链接。这里使用 .parent().attr('href') 来获取链接地址。

完整代码示例

下面是完整的代码示例，可以直接复制到你的页面中使用：

$(function() {
  var $allImages = $('a img');
  var $internalImages = $allImages.filter(function() {
    return $(this)
      .parent()
      .attr('href')
      .indexOf(location.hostname) > -1;
  });

  // 在控制台输出内部链接的图像数量
  console.log($internalImages.length + ' internal images found.');

  // 在页面中添加“仅显示内部图像”的按钮
  $('<button>')
    .text('仅显示内部图像')
    .click(function() {
      $allImages.hide();
      $internalImages.show();
    })
    .appendTo('body');
});

总结

本文介绍了如何使用 jQuery 对图像链接进行排除操作，以实现仅显示内部图像的需求。通过筛选器的使用，我们可以轻松地过滤掉外部链接，从而提高页面的用户体验。