使用jQuery在div中显示alt标签-使多个div

Question

我有一个Drupal 8网站，我想使用alt标签来显示图像。

$('.paragraph--type--tanker img').each(function(e){
				$(this).parent().prepend($("<div/>").text($(this).attr("alt")));
	})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-quickedit-entity-id="paragraph/1" class="paragraph paragraph--type--tanker paragraph--view-mode--default" data-quickedit-entity-instance-id="0">
  <div class="photoswipe-gallery" data-pswp-uid="1">
    <div data-quickedit-field-id="paragraph/1/field_tankers/en/default" class="field field--name-field-tankers field--type-image field--label-hidden field__items">
       <div class="field__item"><a href="http://dryhill.d3v/sites/default/files/tankers/DSC_0025-372x300.jpg" class="photoswipe" data-size="449x362" data-overlay-title="Before"><img src="https://via.placeholder.com/150" width="449" height="362" alt="Before" title="Before" typeof="foaf:Image" class="image-style-large">
</a>
       </div>
       <div class="field__item"><a href="http://dryhill.d3v/sites/default/files/tankers/DSC_0030-372x300.jpg" class="photoswipe" data-size="448x361" data-overlay-title="After"><img src="https://via.placeholder.com/150" width="448" height="361" alt="After" title="After" typeof="foaf:Image" class="image-style-large">
</a>
       </div>
    </div>
  </div>
 </div>
 
 <div data-quickedit-entity-id="paragraph/1" class="paragraph paragraph--type--tanker paragraph--view-mode--default" data-quickedit-entity-instance-id="0">
  <div class="photoswipe-gallery" data-pswp-uid="1">
    <div data-quickedit-field-id="paragraph/1/field_tankers/en/default" class="field field--name-field-tankers field--type-image field--label-hidden field__items">
       <div class="field__item"><a href="http://dryhill.d3v/sites/default/files/tankers/DSC_0025-372x300.jpg" class="photoswipe" data-size="449x362" data-overlay-title="Before"><img src="https://via.placeholder.com/150" width="449" height="362" alt="Before" title="Before" typeof="foaf:Image" class="image-style-large">
</a>
       </div>
       <div class="field__item"><a href="http://dryhill.d3v/sites/default/files/tankers/DSC_0030-372x300.jpg" class="photoswipe" data-size="448x361" data-overlay-title="After"><img src="https://via.placeholder.com/150" width="448" height="361" alt="After" title="After" typeof="foaf:Image" class="image-style-large">
</a>
       </div>
    </div>
  </div>
 </div>

这是摆弄我想做什么的小提琴。 https://jsfiddle.net/burlyn84/z53eygbL/8/

小提琴正在显示我想要的东西。但是我得到的是像这样的多个div。

<div data-quickedit-entity-id="paragraph/1" class="paragraph paragraph--type--tanker paragraph--view-mode--default" data-quickedit-entity-instance-id="0">
    <div class="photoswipe-gallery" data-pswp-uid="1">
        <div data-quickedit-field-id="paragraph/1/field_tankers/en/default" class="field field--name-field-tankers field--type-image field--label-hidden field__items">
             <div class="field__item"><a href="http://dryhill.d3v/sites/default/files/tankers/DSC_0025-372x300.jpg" class="photoswipe" data-size="449x362" data-overlay-title="Before"><div>Before</div><div>Before</div><div>Before</div><div>Before</div><div>Before</div><div>Before</div><div>Before</div><div>Before</div><img src="/sites/default/files/styles/large/public/tankers/DSC_0025-372x300.jpg?itok=_PqN9VvY" width="449" height="362" alt="Before" title="Before" typeof="foaf:Image" class="image-style-large"></a></div>
             <div class="field__item"><a href="http://dryhill.d3v/sites/default/files/tankers/DSC_0030-372x300.jpg" class="photoswipe" data-size="448x361" data-overlay-title="After"><div>After</div><div>After</div><div>After</div><div>After</div><div>After</div><div>After</div><div>After</div><div>After</div><img src="/sites/default/files/styles/large/public/tankers/DSC_0030-372x300.jpg?itok=4sibht7e" width="448" height="361" alt="After" title="After" typeof="foaf:Image" class="image-style-large"></a></div>
          </div>
      </div>
    </div>
</div>

这是Drupal的错误，还是我可以做的防止多次发生的错误？

Answer 1

$('.paragraph--type--tanker img').each(function(e){
    $(this).parent().once().prepend($("<div/>").text($(this).attr("alt")));
})

我发现，如果其他人需要答案，则在其中添加.once()即可解决问题。