所以,本质上我正在使用jQuery解析一些RSS提要。我想获取最新解析的 IMAGE 并获取这个最新的(或第一个实例)img src
并用它的内容填充我的第二个指定元素的 css background-image:
属性。因此,我从提要输出中img src
的第一个实例也将用它的内容填充我的第二个元素的背景图像。我一直在使用以下逻辑。但是,我总是在控制台中得到background-image: 'undefined'
。
由于某种原因,它不会从下面的第一行读取或捕获填充图像的第一个实例。
var HeadImg = $('.featimg img').first().attr('src'); // not pulling
$('.site-featured-content').css('background-image', 'url(' + HeadImg + ')');
下面是我的完整 JS 上下文。
我也尝试在 rss 提要 JS 之前和之后移动上述两行。
jQuery(document).ready(function($){
var url = window.location.href;
if (url.indexOf('check') > -1) {
$(".feed1").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
$(".feed2").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
$(".feed3").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
}
if (url.indexOf('movies') > -1) {
$(".feed1").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
$(".feed2").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
$(".feed3").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
}
if (url.indexOf('host') > -1) {
$(".feed1").rss("http://www.dlisted.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
$(".feed2").rss("http://stupidcelebrities.net/feed/",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
$(".feed3").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
}
if (url.indexOf('TheCollegeLife') > -1) {
$(".feed1").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
$(".feed2").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
$(".feed3").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
}
if (url.indexOf('WingmanConnect') > -1) {
$(".feed1").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
$(".feed2").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
$(".feed3").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
}
if (url.indexOf('Media2point0') > -1) {
$(".feed1").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
$(".feed2").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
$(".feed3").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
}
if (url.indexOf('Brokepoint') > -1) {
$(".feed1").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
$(".feed2").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
$(".feed3").rss("http://www.thehollywoodgossip.com/rss.xml",
{
limit: 17,
entryTemplate:'<h1 class="feedtitle"><a href="{url}">[{author}@{date}] {title}</a></h1><br/><div class="featimg">{teaserImage}</div><div class="feedtxt">{shortBodyPlain}</div>'
})
}
var HeadImg = $('.featimg img').first().attr('src');
$('.site-featured-content').css('background-image', 'url(' + HeadImg + ')');
})
Note:// 是的,<div class="featimg">{teaserImage}</div>
呈现为<div class="featimg"><img class="class" src="/img.jpg"></div>
:
function waitForCompleteRender()
{
var HeadImg = $('.featimg img').first();
if (HeadImg.length == 0) return setTimeout(waitForCompleteRender, 200);
$('.site-featured-content').css('background-image', 'url(' + HeadImg.attr('src') + ')');
}
waitForCompleteRender();
编辑
请注意,这种方法对于生产用途来说是非常危险的(如果图像根本没有渲染)。您可能希望添加一个 if 语句,该语句将在 X 次后处理错误,但没有成功。