Использование jQuery для показа тега alt в div - делает несколько div - PullRequest
Новая
       22

Использование jQuery для показа тега alt в div - делает несколько div

0 голосов
/ 15 апреля 2019

У меня есть сайт 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, или что я могу сделать, чтобы это не происходило несколько раз?

enter image description here

1 Ответ

0 голосов
/ 26 апреля 2019 
$('.paragraph--type--tanker img').each(function(e){
    $(this).parent().once().prepend($("<div/>").text($(this).attr("alt")));
})

Я обнаружил, что добавление .once() к этому решит проблему, если кому-то еще понадобится ответ.

...