8

Simple bug that needs to be fixed and I can't figure out what's wrong. I need to append the same picture to multiple (five) divs in the HTML. For some reason, my code is appending the same picture five times to each div. Making it more clear, each of the five divs needs one picture. Right now, all five have five pictures each. Here is the JQUERY:

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

This is where it is being inserted:

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

There are five of those spread out across the body.

It's probably something small I'm missing. Any help would be appreciated!

4

7 に答える 7

11

最初に 5 つの .letter-q div を操作する場合は、最初にそれらを選択して、関数が実行されるたびにそれらの 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">');
});
于 2012-11-21T03:37:33.257 に答える
5 
$(".faq").each(function(){
        $('.letter-q', this).append('<img src="images/faq-q.png" alt="Question">');
});

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

詳細: http://api.jquery.com/jQuery/

または、ループを使用できません...

$('.faq .letter-q').append('<img src="images/faq-q.png" alt="Question">');
于 2012-11-21T03:35:39.157 に答える
2

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

$(".faq").each(function(){
    $('.letter-q', this).append('<img src="images/faq-q.png" alt="Question">');
});
于 2012-11-21T03:37:09.390 に答える
2

この問題に対する純粋な 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;
}
于 2012-11-21T03:45:57.143 に答える
1

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

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

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

于 2012-11-21T03:39:19.693 に答える
1

必要なものが理解できれば、あとはループではなく 1 回実行するだけです。

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

ループ前:

<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>

等々 ....

よろしく、 エディドゥ

于 2012-11-21T03:40:23.197 に答える
0

これを試して、

$(".faq").each(function(){
        $(this).find('.letter-q').html('<img src="images/faq-q.png" alt="Question">');
});
于 2012-11-21T03:42:23.473 に答える