如何使用 jquery 从某个类中的页面获取第一张图像并放入元标记？答案

【问题标题】：How to get 1st image from page within certain class using jquery and put in meta tag?如何使用 jquery 从某个类中的页面获取第一张图像并放入元标记？
【发布时间】：2013-11-30 15:24:58
【问题描述】：

如何使用 jquery 从位于某个类中的页面中获取第一张（或唯一一张）图像？ ...然后将该链接放入 Facebook 图像元标记中？

例如：<meta property="og:image" content="some image link" />

http://jsfiddle.net/M49hC/1/

 // when click on #btn3
  $('#btn3').click(function(){
   var yo = $('img').children('.clsa');
   alert(yo.getAttribute('src'))
  });

<a href="http://coursesweb.net/javascript/" title="JavaScript Course" class="clsa"><img src="http://www.example.com/ya1.jpg" /></a>
<a href="http://coursesweb.net/javascript/" title="JavaScript Course" class="clsa"><img src="http://www.example.com/ya2.jpg" /></a>
<button id="btn3">Click</button>

【问题讨论】：

标签： jquery image class

【解决方案1】：

试试

fiddle Demo

$('#btn3').click(function () {
     var yo = $('.clsa:first').children('img:first');
     alert(yo.prop('src'))
});

在 OP 评论后更新

Updated fiddle Demo

$('#btn3').click(function () {
    var yo = $('.clsa:first').children('img:first');
    $('body').prepend('<meta property="og:image" content="' + yo.prop('src') + '" />')
   //Instead of $('body').prepend() you can also use $('head').append() if you want to put meta tag in head
});

【讨论】：

【解决方案2】：

您需要找到第一个.clsa 元素，然后找到其中的图像。要获取 src 属性，您需要使用.attr()

 // when click on #btn3
 $('#btn3').click(function () {
     var yo = $('.clsa:first').children('img');
     alert(yo.attr('src'))
 });

演示：Fiddle

如果有可能会有.clsa 元素没有img 作为孩子然后尝试

// when click on #btn3
$('#btn3').click(function () {
    var yo = $('.clsa:has(img):first').find('img');
    alert(yo.attr('src'))
});

这将找到第一个clsa 元素，该元素具有图像作为后代元素

演示：Fiddle

【讨论】：

【解决方案3】：

代码应如下所示：

var img = $(".clsa").children("img")[0];
var meta = $("<meta>", {property: "og-image", content: img.src});
$("head").append(meta);

【讨论】：

获取图像 src 有效，但由于某种原因它不会附加到头部
@JizboJonez 奇怪：我记得在做一些事情时遇到了一些问题，但我认为这可能只是在 IE 8 中。我在移动设备上，所以你必须进行实验。 prepend 是否像 $("head").prepend(meta) 一样工作？你总是可以使用$("title").after(meta) 之类的东西，我很确定它会起作用，尽管我会推荐$("body").prepend(meta)，因为它不需要标题标签。您希望将其放置在尽可能靠近文件顶部的位置（而不是使用 $("body").append(meta)），因为查找此标记的脚本可能只下载 x 字节。
感谢您的回复，但我已经放弃尝试以这种方式做事，因为我听说这不是一个好主意，因为元数据是在页面加载后添加的，这对 Facebook 来说太晚了把它捡起来。所以我用纯 php 代替了我需要的东西。干杯
@JizboJonez 太棒了！我什至认为您不需要非 JavaScript 方法。不过，这是有道理的，因为一些网页阅读器不运行脚本。