2017-01-21 3 views
1

私は以下のreoccurringクラスelementsに入力された外部RSSフィードを持っています。take:first elem img srcコンテンツとポップ2nd elem bg-imgプロパティ(WPの特集img)

<div class="featimg">{teaserImage}</div> 
<div class="featimg">{teaserImage}</div> 
<div class="featimg">{teaserImage}</div> 

:firstのインスタンスをフィードから最新のものに変更するだけです。 img srcのコンテンツを取得し、そのimg srcを使用して、2番目の要素( '.post-thumbnail' css background-image:というプロパティ)を設定します。

基本的に私の要素.post-thumbnailbackground-image:プロパティは、.featimg子の<img src="">コンテンツの最初のインスタンスから生成されます。

注:私の.post-thumbailは、私の 'Wordpress特集画像'が背景画像に添付されている要素です。

私がこれまでに以下のスクリプトを持っている - が、何らかの理由でこれが動作していない、そして機能を備えた画像すなわちであることをそのイメージに引っ張っていません。

var getImageSrc = $('.featimg img').first().attr('src'); 
$('.post-thumbnail').css('background-image', 'url(' + getImageSrc + ')'); 

これはあなたを与える必要があります:あなたは配列の最初の要素に画像選択を制限し、あなたのコードの2行目の.post-サムネイルセレクタを使用する必要が.post-thumbnail

var getImageSrc = $('.featimg img').attr('src'); // .featimg img is correct selector 
$('.site-featured-content').css('background-image', 'url(' + getImageSrc + ')'); 
+1

中括弧はhtmlとは関係ありません。完全にレンダリングされたマークアップを投稿します。これは適切にdom操作を行うためにjqueryを使用することについての質問と思われる。レンダリングされたコンテンツを教えてください。 – t3dodson

+0

ありがとう...画像をレンダリングするだけです。 、申し訳ありませんが、私はそのことを後で明らかにしたと思いました。 –

答えて

1

あなたが探している結果。

+0

これは質問の最初の部分を解決するように見えますが、2番目の部分はありません。まだ添付されていないので、おそらくWordpress CMSのコンテキストです。 –

+0

あなたの質問やコードの2番目の部分にエラーがあるようです。あなたは '.post-thumbnail要素'のバックグラウンドプロパティを設定したいと言っていますが、あなたのコードはそのプロパティを設定しようとしています。 '.site-featured-content'要素 - それを変更すると動作する可能性があります。 – pvukovic