2011-09-24 22 views
0

を使用してdiv要素の内容を含むtitle属性を持つdivの前に要素を追加:は、私が持っているjQueryの

<li class="ingredient"> 
<div> 
<span class="amount">1 lb</span> 
<span class="name">asparagus</span> 
</div> 

私が取得するjQueryのを使用したい:

<li class="ingredient"> 
<img class="myImage" title="Yes!!! asparagus" src="/white2x2.gif"> 
<div> 
<span class="amount">1 lb</span> 
<span class="name">asparagus</span> 
</div> 

は、これまで私が得た:

$(".ingredient div").before("<class='myImage' src="/white2x2.gif' />"); 

どのようにしてタイトルを取得できますか?ページにはこれらの要素がたくさんあることに注意してください。要素を表すタイトルが必要です。

多くの感謝!

答えて

2

あなたのコメントに基づいて、これはあなたのためにそれを行う必要があります。

$('.ingredient div').each(function() { 
    var name = $(this).find('.name').text(); 
    $(this).before($('<img />').attr({class:'myimage', src:'/white2x2.gif',title:name})); 
}); 

はここjsfiddle

+0

ありがとう!私はそれぞれのことを知らなかった。私は今あなたからそれを学び、永遠に感謝しています:) – Barka

0

試してみてください。

var newDiv = $("<img />").attr('src','/white2x2.gif').attr('class','myImage').attr('title','Yes!!! asparagus'); 
$(".ingredient div").before(newDiv); 
+0

感謝です!アスパラガスはハードコーディングすることはできません。これは、domの中を移動して、要素の中の 'name'のクラスを持つ要素のhtmlに移動することによってプログラム的に抽出する必要があります。 – Barka

0

あなたがタイトルとしてあなたのスパンでテキストを使用しようとしている場合:

var name = $('.ingredient').find('.name').text(); 
$('.ingredient div').before($('<img />').attr('class','myImage').attr('src','/white2x2.gif').attr('title', name); 
+0

ここでの課題は、このページに多くのli要素があり、私は、各li要素のそれぞれのイメージのタイトルを一意にしたいと思っています。したがって、これは1行で行う必要があります。私が与えたサンプルコードのように。しかし、私はその行を終えるのに苦労しています。 – Barka

+0

あなたはそれを1行で行う必要はありません。あなたに役立つはずのnathan gonzalezの答えを参照してください。 – Clive

0

あなたはjQueryの.prepend()を使用することができます。

$(document).ready(function(){ 
    $.each($(document).find("li.igredient"), function(){ 
     img_title = $(this).find('.name').text(); 
     $(this).prepend("<img class='myImage' src='/white2x2.gif' title='" + img_title + "' />"); 
    }); 
}); 

http://jsfiddle.net/KHFRh

+0

質問は各liの画像にタイトル要素を動的に追加する方法です。彼はすでに李をうまく追加しています。 –

+0

私はちょうど更新しました、あなたはテストできますか? :) –

+0

title属性はhtmlを受け入れることができないので、おそらく.html()を使いたくないでしょう。 .text()は良いでしょう。まだ彼が探しているものではありません。 –

関連する問題