根据值将不同的 img 插入到 div 中很热

Question

我正在尝试将一个 img 插入 div，但它应该是一个不同的 img，具体取决于 div 值，它是动态填充的

因此，如果值为测试插入图像 test.jpg，如果值为 blabla 插入图像 blabla.jpg 等等（我得到了大约 25 div 个值）

我现在只为第一个工作，如果我使用

它只会在任何地方填充一个 img

var divText = $('div').first().text();

我的名字vars和img的名字jpg完全一样

可能需要以某种方式循环它，一些帮助将不胜感激

到目前为止我的代码是

HTML

<div>test</div>
<div>blabla</div>
<div>dasdad</div>
<div>khjkhjk</div>

jQuery

var name = 'test';
var name1 = "blabla";
var imgPath = "folder/images/";
var divText = $('div').text();
   if (divText === name) {
   $('div').prepend('<img src="' + imgPath + 'test' + '.jpg"/>');
   }
   if (divText === name1) {
   $('div').prepend('<img src="' + imgPath + 'blabla' + '.jpg"/>');
   }

这是我的 fiddle - http://jsfiddle.net/6da9jvr7/

Answer 1

最简单的方法是每个 jquery。

$('div').each(function(){
  var $div = $(this);
  $div.prepend(<img src="' + imgPath + $div.text() + '.jpg"/>');
});

当您调用 $('div').each() 时，jquery 首先选择文档中的每个 div。然后循环遍历 div 并调用您指定的回调。 "this" 绑定到循环中的当前 div，所以当我们调用 $(this) 时，我们 "wrapping" 那 div 和 jquery，这允许我们使用像 .text 和 .prepend 这样的函数。

Answer 2

为此尝试使用 each 循环

$.each($('div'), function() {
    var img_name = $(this).text();
    $(this).prepend('<img src="' + imgPath + img_name + '.jpg"/>');
});

Answer 3

我在 this demo 中做了一些假设（将 foo class 添加到 div 等）

我相信你只需要这个：

var imgPath = "folder/images/";

$('div.foo').each(function(index, element){
   var divText = $(element).text();
    $('div').prepend('<img src="' + imgPath + divText + '.jpg"/>');
});

Answer 4

您可以通过添加 class 以另一种方式识别 div，例如：

<div class="dynamic-image">test</div>
<div class="dynamic-image">blabla</div>

现在你可以只用 dynamic-image class 搜索所有 div，并根据内容获取图像，如下所示：

var path = 'path/to/images';

$('.dynamic-image').each(function(i, e) {
    var $e = $(e),
        img = new Image();

    img.src = path + '/' + $e.text() + '.jpg';
    $e.prepend(img);
});

Answer 5

对于循环部分，你可以这样做。请注意，您要使用 innerHTML 而不是文本。另外，请记住 $('div') returns 一个 div 数组（我将其设置为变量 divs）。

var divs = $('div');

for (var i = 0; i < divs.length; i++) {
    alert(divs[i] + "   " + divs[i].innerHTML);
}

根据值将不同的 img 插入到 div 中很热

Hot to insert a different img into a div depending on the value

html

javascript

jquery

image