javascript - 中的第一张图像大于 200 px 使用 Jquery

Question

对于社交媒体共享，我尝试使用 jQuery 获取第一个大于 200px 的图像 URL。这是我的代码，不起作用:

$("body img").each(function() {
  var $minHeight = 200;
  if ($(this).height() > $minHeight) {
    $(this).attr('src')
  }
});

获得正确的图像后，我需要更改下面 content="default-image.png" 中的默认图像 URL:

<meta property="og:image" name="twitter:image" content="default-image.png"/>

这是我发现的元标记的有效选择器:

$('meta[property=og\\:image]').attr('content','new-image.png');

我发现我的代码可以工作，但是...

$("body img").each(function() {
  var $minHeight = 200;
  if ($(this).height() < $minHeight) {
  $x = $(this).attr('src')
  }
});

$('meta[property=og\\:image]').attr('content',$x);

$(".share a[href*='pinterest']").prop("href","https://pinterest.com/pin/create/button/?url=http://mywebsite.com/mypage&media="+$x);

但是上面的脚本无法根据需要使用大于号if ($(this).height() > $minHeight)

Answer 1

因此，当您执行 $("body img") 时，jquery 返回一个元素数组。

如果我理解正确的话，你需要的是实际高度的图像，而不是 CSS 提供的高度。在这种情况下:

var ImagesGreaterThan200Height =jQuery.grep($("body img"), function( img, i ) {
    if(img.naturalHeight > 200)
         return img;
});

从上面的代码中，您将获得一个高度大于 200px 的图像数组，对于第一张图像，您只需执行以下操作:

ImagesGreaterThan200Height[0] // This returns the first Image

希望这有帮助!