追加图像jQuery的不工作

Question

我要附加到使用jQuery一个div图像的div和我的代码如下所示：

$(".contentdiv")[div].append('<img src="china.jpg" class="contentimg">') 

这并不返回错误，但不显示图像。当我删除[div]迭代器时，它确实有效，但我不想这样做，因为我将来可能会为不同的contentdivs使用不同的图像。 问题是不是在[DIV]虽然，因为

$(".contentdiv")[div].style.marginLeft = 30px 

工作正常。

Answer 1

您需要针对jQuery对象在不同contentdiv不同的图像追加，不仅集合中返回的元素。 @jafarbtech有一个很好的解决方案，但你也可以只是包装你现在有什么$()创建一个对象出来，所以你可以用$.append()

var div = 1; 
 
$($(".contentdiv")[div]).append('<img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="contentimg">'); 
 
$(".contentdiv")[div].style.marginLeft = '30px';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="contentdiv"></div> 
 
<div class="contentdiv"></div> 
 
<div class="contentdiv"></div>

Answer 2

使用.eq()通过使用$(".contentdiv").eq(0).append('<img src="http://placehold.it/140x158" class="contentimg">');

$(".contentdiv").eq(0).append('<img src="http://placehold.it/140x158" class="contentimg">'); 
 
$(".contentdiv").eq(1).append('<img src="http://placehold.it/150x158" class="contentimg">'); 
 
$(".contentdiv").eq(2).append('<img src="http://placehold.it/160x158" class="contentimg">');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="contentdiv"> 
 
</div> 
 

 
<div class="contentdiv"> 
 
</div> 
 

 
<div class="contentdiv"> 
 
</div>