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

这里 fiddle 展示了我想要做什么。 https://jsfiddle.net/burlyn84/z53eygbL/8/

fiddle 显示了我想要的。但是我得到的是这样的多个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() 可以解决问题，如果其他人需要答案的话。

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

Using jQuery to show alt tag in div - makes multiple divs

html

jquery

drupal-8