jquery 将文本转换为图像

Question

我的 Yii2 框架生成的代码在标签内给我一个文本，该文本是图像 url。我尝试使用 jquery 将该文本转换为图像并附加但它不起作用我的 Yii2 生成的代码是

<div id="gallery-gallery_id">
<label><input name="Gallery[gallery_id][]" value="176" type="checkbox"> u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/114400179a0768d203377245b8654714fe9bb65.1png</label>
<label><input name="Gallery[gallery_id][]" value="177" type="checkbox"> u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/21440017a0fb0bd39d7388fefaae540cb069483.2png</label>
<label><input name="Gallery[gallery_id][]" value="180" type="checkbox"> u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/114421754b47aa61094f6765a7ff76f3f1296cc.1jpg</label>
<label><input name="Gallery[gallery_id][]" value="178" type="checkbox"> u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/3144001878d1205735991133700565964c026bd.3png</label>
<label><input name="Gallery[gallery_id][]" value="179" type="checkbox"> u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/414400133d68969a6162ea0290cfbb80817852f.4png</label>
<label><input name="Gallery[gallery_id][]" value="181" type="checkbox"> u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/314421752c0c9d277bf133a6ca82992742c080d.3jpg</label>
<label><input name="Gallery[gallery_id][]" value="182" type="checkbox"> u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/5144217e177430e5b8a11b224bba3470681f34b.5jpg</label>
<label><input name="Gallery[gallery_id][]" value="183" type="checkbox"> u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/7144217b578dfce326513fc927499138447916d.7jpg</label>
</div>

我做到了

<?php foreach ($model->galleries as $image) {?>
    <script type="text/javascript">
    $('#gallery-gallery_id label').append('<img src="<?= $image->gallery_lgimage)?>" height="100" width="100">');
</script>
<?php }?>

但是我为每个标签获取了所有图像，我试图为每个标签获取一张图像

我得到的结果

<div id="gallery-gallery_id">
<label><input name="Gallery[gallery_id][]" value="176" type="checkbox"> 176<img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/114400179a0768d203377245b8654714fe9bb65.1png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/21440017a0fb0bd39d7388fefaae540cb069483.2png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/3144001878d1205735991133700565964c026bd.3png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/414400133d68969a6162ea0290cfbb80817852f.4png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/114421754b47aa61094f6765a7ff76f3f1296cc.1jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/314421752c0c9d277bf133a6ca82992742c080d.3jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/5144217e177430e5b8a11b224bba3470681f34b.5jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/7144217b578dfce326513fc927499138447916d.7jpg" width="100" height="100"></label>
<label><input name="Gallery[gallery_id][]" value="177" type="checkbox"> 177<img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/114400179a0768d203377245b8654714fe9bb65.1png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/21440017a0fb0bd39d7388fefaae540cb069483.2png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/3144001878d1205735991133700565964c026bd.3png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/414400133d68969a6162ea0290cfbb80817852f.4png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/114421754b47aa61094f6765a7ff76f3f1296cc.1jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/314421752c0c9d277bf133a6ca82992742c080d.3jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/5144217e177430e5b8a11b224bba3470681f34b.5jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/7144217b578dfce326513fc927499138447916d.7jpg" width="100" height="100"></label>
<label><input name="Gallery[gallery_id][]" value="178" type="checkbox"> 178<img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/114400179a0768d203377245b8654714fe9bb65.1png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/21440017a0fb0bd39d7388fefaae540cb069483.2png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/3144001878d1205735991133700565964c026bd.3png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/414400133d68969a6162ea0290cfbb80817852f.4png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/114421754b47aa61094f6765a7ff76f3f1296cc.1jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/314421752c0c9d277bf133a6ca82992742c080d.3jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/5144217e177430e5b8a11b224bba3470681f34b.5jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/7144217b578dfce326513fc927499138447916d.7jpg" width="100" height="100"></label>
<label><input name="Gallery[gallery_id][]" value="179" type="checkbox"> 179<img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/114400179a0768d203377245b8654714fe9bb65.1png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/21440017a0fb0bd39d7388fefaae540cb069483.2png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/3144001878d1205735991133700565964c026bd.3png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/414400133d68969a6162ea0290cfbb80817852f.4png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/114421754b47aa61094f6765a7ff76f3f1296cc.1jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/314421752c0c9d277bf133a6ca82992742c080d.3jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/5144217e177430e5b8a11b224bba3470681f34b.5jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/7144217b578dfce326513fc927499138447916d.7jpg" width="100" height="100"></label>
<label><input name="Gallery[gallery_id][]" value="180" type="checkbox"> 180<img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/114400179a0768d203377245b8654714fe9bb65.1png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/21440017a0fb0bd39d7388fefaae540cb069483.2png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/3144001878d1205735991133700565964c026bd.3png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/414400133d68969a6162ea0290cfbb80817852f.4png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/114421754b47aa61094f6765a7ff76f3f1296cc.1jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/314421752c0c9d277bf133a6ca82992742c080d.3jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/5144217e177430e5b8a11b224bba3470681f34b.5jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/7144217b578dfce326513fc927499138447916d.7jpg" width="100" height="100"></label>
<label><input name="Gallery[gallery_id][]" value="181" type="checkbox"> 181<img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/114400179a0768d203377245b8654714fe9bb65.1png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/21440017a0fb0bd39d7388fefaae540cb069483.2png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/3144001878d1205735991133700565964c026bd.3png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/414400133d68969a6162ea0290cfbb80817852f.4png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/114421754b47aa61094f6765a7ff76f3f1296cc.1jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/314421752c0c9d277bf133a6ca82992742c080d.3jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/5144217e177430e5b8a11b224bba3470681f34b.5jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/7144217b578dfce326513fc927499138447916d.7jpg" width="100" height="100"></label>
<label><input name="Gallery[gallery_id][]" value="182" type="checkbox"> 182<img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/114400179a0768d203377245b8654714fe9bb65.1png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/21440017a0fb0bd39d7388fefaae540cb069483.2png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/3144001878d1205735991133700565964c026bd.3png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/414400133d68969a6162ea0290cfbb80817852f.4png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/114421754b47aa61094f6765a7ff76f3f1296cc.1jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/314421752c0c9d277bf133a6ca82992742c080d.3jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/5144217e177430e5b8a11b224bba3470681f34b.5jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/7144217b578dfce326513fc927499138447916d.7jpg" width="100" height="100"></label>
<label><input name="Gallery[gallery_id][]" value="183" type="checkbox"> 183<img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/114400179a0768d203377245b8654714fe9bb65.1png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/21440017a0fb0bd39d7388fefaae540cb069483.2png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/3144001878d1205735991133700565964c026bd.3png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/414400133d68969a6162ea0290cfbb80817852f.4png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/114421754b47aa61094f6765a7ff76f3f1296cc.1jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/314421752c0c9d277bf133a6ca82992742c080d.3jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/5144217e177430e5b8a11b224bba3470681f34b.5jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/7144217b578dfce326513fc927499138447916d.7jpg" width="100" height="100"></label>
</div>

Answer 1

Select 一次只能将您的图片附加到一个标签。

<?php 
$i = 0;
foreach ($model->galleries as $image) {

    echo '
        <script type="text/javascript">
            $("#gallery-gallery_id label:nth-child(' . $i . ')").append("<img src=\"' . $image->gallery_lgimage . '\" height=\"100\" width=\"100\">);
        </script>';
   $i++;

} ?>

Answer 2

您似乎将每个 <image> 附加到每个 <label>。 $('#gallery-gallery_id label') 匹配 #gallery-gallery_id.

中的所有 <label> 元素

据我了解，您想将每个 <label> 中的文本 url 转换为 <label> 中的 <image> 元素。

在下面的方法中，我遍历每个 <label>，将其文本 url 转换为图像元素，并将 <image> 附加到 <label> .我依靠 jQuery 的 text() method 去除 HTML 和 return 只有文本 url.

虽然，正如我在上面的评论中提到的，使用 PHP 写出 HTML 可能更简单，而不是使用 JavaScript 来操纵稍后。

jQuery('#gallery-gallery_id label').each(function() {
  var $this = $(this);
  var $input = $this.find('input');
  var url = $this.text();
  var $img = jQuery('<img>', {
    'src': url
  });
  $this.html($input).append($img);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery-gallery_id">
  <label><input name="Gallery[gallery_id][]" value="176" type="checkbox"> https://loremflickr.com/20/20?random=1</label>
  <label><input name="Gallery[gallery_id][]" value="177" type="checkbox"> https://loremflickr.com/20/20?random=2</label>
  <label><input name="Gallery[gallery_id][]" value="180" type="checkbox"> https://loremflickr.com/20/20?random=3</label>
  <label><input name="Gallery[gallery_id][]" value="178" type="checkbox"> https://loremflickr.com/20/20?random=4</label>
  <label><input name="Gallery[gallery_id][]" value="179" type="checkbox"> https://loremflickr.com/20/20?random=5</label>
  <label><input name="Gallery[gallery_id][]" value="181" type="checkbox"> https://loremflickr.com/20/20?random=6</label>
  <label><input name="Gallery[gallery_id][]" value="182" type="checkbox"> https://loremflickr.com/20/20?random=7</label>
  <label><input name="Gallery[gallery_id][]" value="183" type="checkbox"> https://loremflickr.com/20/20?random=8</label>
</div>

jquery 将文本转换为图像

jquery convert text to image

jquery

yii2

yii2-advanced-app