Проблемы с подпоркой ('tagName') в jQuery
Возникли проблемы с некоторыми странными настройками, с которыми я столкнулся, работая над букмарклетом для рабочих целей. Мне нужно, чтобы он мог найти все видео-встраивания на странице и обработать информацию, чтобы сгенерировать код JSON для вставки в нашу галерею. Проблема в том, что я не могу надежно получить информацию, необходимую для обработки данных.
сначала я нахожу все div на странице с правильным itemprop
items = $('div[itemprop=video]');
Затем с помощью $.each() я начинаю обработку
thumbnail = getThumb($(this).find('*[itemprop=thumbnailUrl]'));
filename = getFilename($(this).find('*[itemprop=contentUrl]'));
filelocation = getFilelocation( $(this).find('*[itemprop=contentUrl]'));
Мне нужно, чтобы получить thumbnailURL и contentURL для обработки,
function getFilename(gfn) {
if(gfn.prop('tagName') == 'META') {
gfname = gfn.prop('content');
} else {
gfname = gfn.attr('href');
}
x = gfname.lastIndexOf('/');
gfname = gfname.substr(x+1);
y = gfname.lastIndexOf('.');
gfname = gfname.substr(0,y);
return gfname;
}
.prop('tagName') продолжает возвращаться undefined когда itemprops У кого-нибудь есть идеи, как запустить этот букмарклет?
Закладки и исходный код доступны здесь
Редактировать: потому что это было упомянуто, я пойду вперед и дам сюда код букмарклета с лишними лишними гифками
<a href="javascript:(function(){
var jQueryIsReady = function(){
if($('#vid2json_container').length < 1)
{
container = $(document.createElement('div'));
container.attr('id','vid2json_container');
container.css('position','fixed');
container.css('top','0');
container.css('left','0');
container.css('background-color','#222222');
container.css('padding','2px');
container.css('border-style','solid');
container.css('border-width','1px');
container.css('border-color','#000000');
container.css('opacity','0.95');
container.css('z-index','999997');
container.css('width','500px');
container.css('height',window.innerHeight);
container.css('overflow-y','auto');
container.css('overflow-x','hidden');
container.hide();
divider_01 = $(document.createElement('div'));
divider_01.css('clear','both');
logo = $(document.createElement('img'));
logo.attr('src','http://www.cityofdev.com/apps/bookmarklet/vid2json.png');
logo.css('float','left');
close_button = $(document.createElement('img'));
close_button.attr('src','http://www.cityofdev.com/apps/bookmarklet/close_button.jpg');
close_button.css('float','right');
close_button.bind('click',function(){
$('#vid2json_container').hide(500,function(){
$(this).remove();
});
});
output = $(document.createElement('div'));
output.attr('id','vid2json_output');
output.css('color','#ffffff');
container.append(logo);
container.append(close_button);
container.append(divider_01);
container.append(output);
$('body').prepend(container.show(500));
}
destination = $('#vid2json_output');
destination.html('');
items = $('div[itemprop=video]');
output = $(document.createElement('div'));
output.css('display','block');
output.css('padding','0 0 10px');
if(items.length > 0)
{
$.each(items,function(index,el){
title = $(this).find('*[itemprop=name]').attr('content');
thumbnail = getThumb($(this).find('*[itemprop=thumbnailUrl]'));
filename = getFilename($(this).find('*[itemprop=contentUrl]'));
filelocation = getFilelocation($(this).find('*[itemprop=contentUrl]'));
description = $(this).find('*[itemprop=description]').attr('content');
city = getCity();
citylink = getCitylink();
category = getCategory();
categorylink = getCategorylink();
duration = $(this).find('*[itemprop=duration]').attr('content');
head = $(document.createElement('span'));
head.html(title+' -> JSON<br />\n');
head.css('display','block');
head.css('font-weight','700');
head.css('font-size','12px');
textarea = $(document.createElement('textarea'));
textarea.css('width','100%');
textarea.css('height','300px');
textarea.css('margin','0 0 20px');
vCode = '';
vCode += ' {\n';
vCode += ' "title": "'+title+'",\n';
vCode += ' "thumbnail": "'+thumbnail+'",\n';
vCode += ' "filename": "'+filename+'",\n';
vCode += ' "filelocation": "'+filelocation+'",\n';
vCode += ' "description": "'+description+'",\n';
vCode += ' "city": "'+city+'",\n';
vCode += ' "citylink": "'+citylink+'",\n';
vCode += ' "category": "'+category+'",\n';
vCode += ' "categorylink": "'+categorylink+'",\n';
vCode += ' "duration": "'+duration+'",\n';
vCode += ' "height": "",\n';
vCode += ' "width": ""\n';
vCode += ' }\n';
textarea.val(vCode);
output.append(head);
output.append(textarea);
destination.append(output);
});
}else{
output.html('No Items Found');
destination.html(output);
}
scrollToTop = $(document.createElement('div'));
scrollToTop.html('Scroll To Top');
scrollToTop.css('cursor','pointer');
scrollToTop.bind('click',function(){
$('#vid2json_container').animate({ scrollTop: 0 },1000);
});
footer = $(document.createElement('div'));
footer.css('font-size','9px');
footer.css('color','#555555');
footer.css('padding','5px 0');
footer.html('VID2JSON bookmarklet programmed by David A Perez');
destination.append(scrollToTop);
destination.append(footer);
};
var checkJquery = function(){
if(typeof jQuery == 'undefined')
{
script01 = document.createElement('SCRIPT');
script01.src = 'http://code.jquery.com/jquery-1.9.1.min.js';
script01.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script01);
}else{
clearTimeout(interval);
jQueryIsReady();
}
};
var interval = setInterval(checkJquery,100);
function getCategorylink()
{
catl = location.href;
return catl;
}
function getCategory()
{
cat = $('.cat-header, .category-header').find('span, h1').html();
return cat.replace(/^( ){1,}|( ){1,}$/gi,'');
}
function getCitylink()
{
cl = location.href;
x = cl.indexOf('/',8);
return cl.substr(0,x);
}
function getCity()
{
c = $('title').html();
x = c.lastIndexOf('-');
c = c.substr(x+1);
y = c.lastIndexOf(',');
c = c.substr(0,y);
return c.replace(/^( ){1,}|( ){1,}$/gi,'');
}
function getFilelocation(gfl)
{
if(gfl.is('meta'))
{
gflocation = gfl.prop('content');
}else{
gflocation = gfl.attr('href');
}
x = gflocation.lastIndexOf('/');
gflocation = gflocation.replace(/www/gi,'ww');
gflocation = gflocation.substr(0,x+1);
gflocation = gflocation.replace(/[^\/]{1,}$/,'');
return gflocation.replace(/[\/]{2,}$/,'\/');
}
function getFilename(gfn)
{
if(gfn.is('meta'))
{
gfname = gfn.prop('content');
}else{
gfname = gfn.attr('href');
}
x = gfname.lastIndexOf('/');
gfname = gfname.substr(x+1);
y = gfname.lastIndexOf('.');
gfname = gfname.substr(0,y);
return gfname;
}
function getThumb(gt)
{
alert(gt.is('meta'));
if(gt.is('meta'))
{
gtname = gt.prop('content');
}else{
gtname = gt.attr('src');
}
num = gtname.lastIndexOf('/');
return gtname.substr(num+1);
}
})();">vid2json</a>
Предполагается, что он запускается как букмарклет, поэтому его можно использовать на любой странице своего сайта. Он выполняется вручную после загрузки веб-страницы, загружает jQuery, и как только он готов, он начинает обработку. Часть, которая, кажется, вызывает проблему
$(this).find('*itemprop=ITEMPROP');
это работает нормально, когда itemprops находятся в метатегах, однако в случае
<td class="ad" colspan="2" bgcolor="#000000" style="border:solid #CCCCCC 1px;">
<div itemscope itemtype="http://schema.org/LocalBusiness" style="color:#222222; font-weight: bold; text-align: center; width:580px;">
<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<meta itemprop="name" content="P.C.C.S. Dryer Vent Cleaning" />
<meta itemprop="duration" content="T1M20S" />
<meta itemprop="description" content="Fort Worth, TX dryer vent cleaning service." />
<meta itemprop="height" content="580" />
<meta itemprop="width" content="326" />
<a href="http://204.145.110.12/thecityoffortworth.com/videos/pccs-dryer-vent-cleaning.mp4" itemprop="contentURL" style="display:block;width:580px; height:326px; border:0px; margin-bottom:104px;" id="pccs">
<img src="pccs-dryer-vent-cleaning.png" alt="P.C.C.S. Dryer Vent Cleaning" width="580" height="430" border="0" itemprop="thumbnailURL" />
</a>
</div>
<a href="http://www.fortworthsweep.com" class="style5" target="_blank" rel="nofollow" itemprop="url" style="color:#ffffff">www.fortworthsweep.com</a>
</div>
он возвращает 0 предметов. Я пробовал.find('meta[itemprop=contentURL],a[itemprop=contentURL]'), но он также возвращает 0 элементов. Остановка действительно кажется, что это тег, есть идеи?
Кроме того, я прошу прощения, если я делаю что-то не так, это мой первый пост в Stackru, и я в основном самоучка с Javascript и jQuery. Я делаю все возможное, чтобы узнать, что возможно и что я могу сделать, чтобы помочь. Спасибо за ваше терпение и помощь!
3 ответа
Общая концепция .prop('tagName') работает хорошо, как вы можете видеть в этом jsFiddle. Скорее всего, проблема в том, что ваш объект jQuery пуст (например, селектор ничего не нашел). Чтобы увидеть, если это ваша проблема, проверьте .length свойство объекта jQuery.
Кроме того, вы не показываете нам общий контекст этого кода. Если он выполняется до разбора страницы, то это может быть еще одной причиной, по которой ваш объект jQuery пуст.
Согласно документации jQuery для.prop():
Он возвращает неопределенное значение для свойства, которое не было установлено, или если у сопоставленного набора нет элементов.
Так как tagName свойство всегда установлено, более вероятная проблема в том, что ваш объект jQuery пуст.
На связанной странице, которую вы указали, я не могу найти способ установить точку останова ни в одном из ваших кодов, поэтому я даже не уверен, что она вызывается / выполняется. Кажется, это вызвано тем, что вы помещаете большие объемы кода в javascript: ссылка, а не просто вызов функции.
У jQuery есть другой способ проверить, является ли элемент определенным типом тега, .is() метод:
if (gsn.is("meta"))
Не уверен, почему .prop вызов дал неопределенный, если gfn не был пуст.
Решение найдено!
Отчасти потребовалось много времени, чтобы заставить его проверить все, селекторы и.find(), похоже, не получили результаты, которые я искал (возможно, из-за несовместимых заглавных букв) Но мне удалось получить его работай наконец!
<a href="javascript:(function(){
var jQueryIsReady = function(){
if($('#vid2json_container').length < 1)
{
container = $(document.createElement('div'));
container.attr('id','vid2json_container');
container.css('position','fixed');
container.css('top','0');
container.css('left','0');
container.css('background-color','#222222');
container.css('padding','2px');
container.css('border-style','solid');
container.css('border-width','1px');
container.css('border-color','#000000');
container.css('opacity','0.95');
container.css('z-index','999997');
container.css('width','500px');
container.css('height',window.innerHeight);
container.css('overflow-y','auto');
container.css('overflow-x','hidden');
container.hide();
divider_01 = $(document.createElement('div'));
divider_01.css('clear','both');
divider_02 = $(document.createElement('div'));
divider_02.css('clear','both');
logo = $(document.createElement('img'));
logo.attr('src','http://www.cityofdev.com/apps/bookmarklet/vid2json.png');
logo.css('float','left');
close_button = $(document.createElement('img'));
close_button.attr('src','http://www.cityofdev.com/apps/bookmarklet/close_button.jpg');
close_button.css('float','right');
close_button.bind('click',function(){
$('#vid2json_container').hide(500,function(){
$(this).remove();
});
});
nak = $(document.createElement('img'));
nak.attr('id','naknak');
nak.attr('src', 'http://www.cityofdev.com/apps/bookmarklet/naknak.gif');
nak.css('float','left');
nak.css('width','143px');
nak.css('height','119px');
nak.css('z-index','99998');
salamander = $(document.createElement('img'));
salamander.attr('id','salamander');
salamander.attr('src', 'http://www.cityofdev.com/apps/bookmarklet/salamander.gif');
salamander.css('float','right');
salamander.css('width','112px');
salamander.css('height','117px');
salamander.css('z-index','99998');
output = $(document.createElement('div'));
output.attr('id','vid2json_output');
output.css('color','#ffffff');
container.append(logo);
container.append(close_button);
container.append(divider_01);
container.append(nak);
container.append(salamander);
container.append(divider_02);
container.append(output);
$('body').prepend(container.show(500));
}
destination = $('#vid2json_output');
destination.html('');
items = $('div[itemprop=video]');
output = $(document.createElement('div'));
output.css('display','block');
output.css('padding','0 0 10px');
if(items.length > 0)
{
$.each(items,function(index,el){
children = $(el).find('*');
$.each(children, function(i,ele){
n = $(ele);
if(n.attr('itemprop') !== undefined)
{
switch(n.attr('itemprop').toLowerCase())
{
case 'name':
title = n.attr('content');
break;
case 'contenturl':
filename = getFilename(n);
filelocation = getFilelocation(n);
break;
case 'thumbnailurl':
thumbnail = getThumb(n);
break;
case 'description':
description = n.attr('content');
break;
case 'duration':
duration = n.attr('content');
break;
default:
break;
}
}
});
city = getCity();
citylink = getCitylink();
category = getCategory();
categorylink = getCategorylink();
head = $(document.createElement('span'));
head.html(title+' -> JSON<br />\n');
head.css('display','block');
head.css('font-weight','700');
head.css('font-size','12px');
textarea = $(document.createElement('textarea'));
textarea.css('width','100%');
textarea.css('height','300px');
textarea.css('margin','0 0 20px');
vCode = '';
vCode += ' {\n';
vCode += ' "title": "'+title+'",\n';
vCode += ' "thumbnail": "'+thumbnail+'",\n';
vCode += ' "filename": "'+filename+'",\n';
vCode += ' "filelocation": "'+filelocation+'",\n';
vCode += ' "description": "'+description+'",\n';
vCode += ' "city": "'+city+'",\n';
vCode += ' "citylink": "'+citylink+'",\n';
vCode += ' "category": "'+category+'",\n';
vCode += ' "categorylink": "'+categorylink+'",\n';
vCode += ' "duration": "'+duration+'",\n';
vCode += ' "height": "",\n';
vCode += ' "width": ""\n';
vCode += ' }\n';
textarea.val(vCode);
output.append(head);
output.append(textarea);
destination.append(output);
});
}else{
output.html('No Items Found');
destination.html(output);
}
scrollToTop = $(document.createElement('div'));
scrollToTop.html('Scroll To Top');
scrollToTop.css('cursor','pointer');
scrollToTop.bind('click',function(){
$('#vid2json_container').animate({ scrollTop: 0 },1000);
});
footer = $(document.createElement('div'));
footer.css('font-size','9px');
footer.css('color','#555555');
footer.css('padding','5px 0');
footer.html('VID2JSON bookmarklet programmed by David A Perez');
destination.append(scrollToTop);
destination.append(footer);
};
var checkJquery = function(){
if(typeof jQuery == 'undefined')
{
script01 = document.createElement('SCRIPT');
script01.src = 'http://code.jquery.com/jquery-1.9.1.min.js';
script01.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script01);
}else{
clearTimeout(interval);
jQueryIsReady();
}
};
var interval = setInterval(checkJquery,100);
function getCategorylink()
{
catl = location.href;
return catl;
}
function getCategory()
{
cat = $('.cat-header, .category-header').find('span, h1').html();
return cat.replace(/^( ){1,}|( ){1,}$/gi,'');
}
function getCitylink()
{
cl = location.href;
x = cl.indexOf('/',8);
return cl.substr(0,x);
}
function getCity()
{
c = $('title').html();
x = c.lastIndexOf('-');
c = c.substr(x+1);
y = c.lastIndexOf(',');
c = c.substr(0,y);
return c.replace(/^( ){1,}|( ){1,}$/gi,'');
}
function getFilelocation(gfl)
{
if(gfl.length<1){return 'contentURL not found'+gfl.length;}
if(gfl.is('meta'))
{
gflocation = gfl.prop('content');
}else{
gflocation = gfl.attr('href');
}
x = gflocation.lastIndexOf('/');
gflocation = gflocation.replace(/www/gi,'ww');
gflocation = gflocation.substr(0,x+1);
gflocation = gflocation.replace(/[^\/]{1,}$/,'');
return gflocation.replace(/[\/]{2,}$/,'\/');
}
function getFilename(gfn)
{
if(gfn.length<1){return 'contentURL not found'+gfn.length;}
if(gfn.is('meta'))
{
gfname = gfn.prop('content');
}else{
gfname = gfn.attr('href');
}
x = gfname.lastIndexOf('/');
gfname = gfname.substr(x+1);
y = gfname.lastIndexOf('.');
gfname = gfname.substr(0,y);
return gfname;
}
function getThumb(gt)
{
if(gt.length<1){return 'thumbnailURL not found'+gt.length;}
if(gt.is('meta'))
{
gtname = gt.prop('content');
}else{
gtname = gt.attr('src');
}
num = gtname.lastIndexOf('/');
return gtname.substr(num+1);
}
})();">vid2json</a>
Решение проблемы у меня было
$.each(children, function(i,ele){
n = $(ele);
if(n.attr('itemprop') !== undefined)
{
switch(n.attr('itemprop').toLowerCase())
{
case 'name':
title = n.attr('content');
break;
case 'contenturl':
filename = getFilename(n);
filelocation = getFilelocation(n);
break;
case 'thumbnailurl':
thumbnail = getThumb(n);
break;
case 'description':
description = n.attr('content');
break;
case 'duration':
duration = n.attr('content');
break;
default:
break;
}
}
});
Возможно, есть более эффективные способы справиться с этим, но, похоже, он выполняет работу достаточно надежно. Я, вероятно, добавлю больше к этому, когда возникнут ситуации. Спасибо за советы, ребята, это помогло мне пробиться к этому решению!