Как получить 1-е изображение со страницы в определенном классе, используя jquery, и вставить метатег?

0

Как я могу получить первое (или единственное) изображение со страницы, которая находится в определенном классе, используя 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>
Теги:
class
image

3 ответа

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
});
Поделиться
  • 0
    работает хорошо, но мне нужно добавить его и в метатег
  • 0
    @JizboJonez Смотрите это -> jsfiddle.net/cse_tushar/M49hC/3
1

Вам нужно найти первый элемент .clsa а затем найти изображение внутри него. Чтобы получить атрибут src, вам нужно использовать .attr()

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

Демо: скрипка

Если есть вероятность, что будут элементы .clsa без img в качестве потомка, попробуйте

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

Это найдет элемент clsa который имеет изображение как элемент потомка

Демо: скрипка

Поделиться
  • 0
    работает хорошо, но мне нужно добавить его и в метатег
1

Код должен выглядеть примерно так:

var img = $(".clsa").children("img")[0];
var meta = $("<meta>", {property: "og-image", content: img.src});
$("head").append(meta);
Поделиться
  • 0
    Получение изображения src работает, но по какой-то причине оно не добавляется в заголовок
  • 0
    @JizboJonez странно: я помню, что у меня были проблемы с работой в голове, но я подумал, что это может быть только в IE 8. Я на мобильном телефоне, так что вам придется экспериментировать. prepend ли prepend как в $("head").prepend(meta) ? Вы всегда можете использовать что-то вроде $("title").after(meta) , что, я уверен, сработает, хотя я бы порекомендовал $("body").prepend(meta) потому что для этого не требуется заголовок тег. Вы хотели бы разместить его как можно ближе к верхней части файла (и не использовать $("body").append(meta) ), потому что скрипт, ищущий этот тег, может загружать только x байтов.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню