web-dev-qa-db-ja.com

JQuery：.each（）および.append（）を使用してHTMLに画像を追加するのに役立ちます

修正が必要な単純なバグで、何が問題なのか理解できません。 HTMLの複数（5）のdivに同じ画像を追加する必要があります。何らかの理由で、私のコードは同じ画像を各divに5回追加しています。より明確にするために、5つのdivのそれぞれに1つの画像が必要です。現在、5つすべてにそれぞれ5枚の写真があります。これがJQUERYです：

$(".faq").each(function(){
        $('.faq .letter-q').append('<img src="images/faq-q.png" alt="Question">');
});

これが挿入されている場所です：

<div class="letter-q"></div>

それらのうちの5つが体全体に広がっています。

それはおそらく私が見逃している小さなものです。どんな助けでもいただければ幸いです！

jqueryhtmlappendeach
7
cydonknight

最初に5つの.letter-qdivを操作する場合は、最初にそれらを選択して、関数が実行されるたびに「.each」がそれらのdivを操作するようにします。

$('.faq .letter-q').each(function(){
    //this wrapped in jQuery will give us the current .letter-q div
    $(this).append('<img src="images/faq-q.png" alt="Question">');
});
11
site
$(".faq").each(function(){
        $('.letter-q', this).append('<img src="images/faq-q.png" alt="Question">');
});

セレクターにcontextを追加します

続きを読む： http://api.jquery.com/jQuery/

または、ループを使用することはできません...

$('.faq .letter-q').append('<img src="images/faq-q.png" alt="Question">');
4
ahren

この問題にはおそらく純粋なCSSソリューションもあることは注目に値します。ページに<img>タグを挿入する代わりに、画像のソースをターゲットの背景として使用できます（背景がまだない場合）。

適用されるHTMLやその他のCSSの構造を知らなければ、確実にすることは不可能ですが、推測は次のとおりです。

.faq .letter-q {
  padding-right: 20px; /* or however wide the image is */
  min-height: 20px; /* or however tall the image is */
  background-image: url(images/faq-q.png);
  background-position-x: 100%;
  background-position-y: 50%;
  background-repeat: no-repeat;
}
2
jimbo

これを使用してみてください：

$(".faq").each(function(){
    $('.letter-q', this).append('<img src="images/faq-q.png" alt="Question">');
});
1
arulmr

外部の.each()呼び出しはまったく必要ありません。内側の線だけがあなたが望むことをするはずです：

$('.faq .letter-q').append('<img src="images/faq-q.png" alt="Question" />');

あなたのコードは、「各.faq（5つあります）について、ページ上のすべての.faq .letter-qを見つけて、画像を追加する」と同等のことを行っています。本当に必要なのは、その文の最後の節だけです。

1
jimbo

私があなたが必要としていることを理解していれば、あなたがしなければならないのはループではなく一度だけ実行することです。

主な問題は、このループを実行すると、結果が次のようになることだと思います。

ループ前：

<div class="letter-q"></div>
<div class="letter-q"></div>
<div class="letter-q"></div>
<div class="letter-q"></div>
<div class="letter-q"></div>

初めての結果：

<div class="letter-q"><img src="images/faq-q.png" alt="Question"></div>
<div class="letter-q"><img src="images/faq-q.png" alt="Question"></div>
<div class="letter-q"><img src="images/faq-q.png" alt="Question"></div>
<div class="letter-q"><img src="images/faq-q.png" alt="Question"></div>
<div class="letter-q"><img src="images/faq-q.png" alt="Question"></div>

2回目：

<div class="letter-q"><img src="images/faq-q.png" alt="Question"><img src="images/faq-q.png" alt="Question"></div>
<div class="letter-q"><img src="images/faq-q.png" alt="Question"><img src="images/faq-q.png" alt="Question"></div>
<div class="letter-q"><img src="images/faq-q.png" alt="Question"><img src="images/faq-q.png" alt="Question"></div>
<div class="letter-q"><img src="images/faq-q.png" alt="Question"><img src="images/faq-q.png" alt="Question"></div>
<div class="letter-q"><img src="images/faq-q.png" alt="Question"><img src="images/faq-q.png" alt="Question"></div>

等々 ....

よろしく、エディドゥ

1
Eddiedu

これを試して、

$(".faq").each(function(){
        $(this).find('.letter-q').html('<img src="images/faq-q.png" alt="Question">');
});
0
Jashwant