обернуть элемент без jquery - PullRequest
Новая
       70

обернуть элемент без jquery

0 голосов
/ 14 июля 2020

У меня есть такой код на моей странице: 

    <div class="kg-gallery-image" style="flex: 0.708889 1 0%;">
<img src="photo.jpg"></div>

Я хочу изменить их на лету, не используя jquery: 

    <div class="kg-gallery-image" style="flex: 0.6665 1 0%;">
<a data-fslightbox="" href="photo.jpg"><img src="photo"></a></div>

Мне нужно , получите тег img внутри kg-gallery-image и оберните его: 

<a data-fslightbox="" href=""></a>

Но он мне нужен, чтобы получить scr тега img и поместить его для href тега a.

Я использовал этот код jquery: 

<script>
$('.kg-gallery-image img ').each(function() {
    $(this).wrap("<a data-no-swup data-fslightbox href='" + this.src + "'/>");
});
</script>

, который отлично работает, но поскольку я не использую никаких других функций из jquery, я хочу попробовать создать этот код с чистым js, есть ли способ создать это с чистым js?

Я создал что-то вроде этого: 

Array.from(document.querySelectorAll('.kg-gallery-image img')).forEach((el) => {
  const wrapper = document.createElement('a');
  var imgSource = document.querySelector('.kg-gallery-image img').src;
  wrapper.href=""+imgSource;
 wrapper.setAttribute('data-fslightbox', 'data-fslightbox');

  el.parentNode.insertBefore(wrapper, el);
  wrapper.appendChild(el);
});

Но он добавляет href первого изображения ко всем тегам.

Ответы [ 2 ]

0 голосов
/ 15 июля 2020

Я решил проблему с помощью: 

Array.from(document.querySelectorAll('.kg-gallery-image img')).forEach((el) => {  
  var wrapper = document.createElement('a');
  wrapper.setAttribute('data-fslightbox', 'data-fslightbox');
  wrapper.href=""+el.src;
  el.parentNode.insertBefore(wrapper, el);
  wrapper.appendChild(el);
});
0 голосов
/ 14 июля 2020

Вы можете сделать так:

  1. Получить родительский элемент, внутри которого вы хотите добавить a тег
  2. Создайте a элемент, используя createElement
  3. Получить img, используя `sr c
  4. Добавить дочерний элемент, используя appendChild

var parentElem = document.getElementsByClassName("kg-gallery-image");
var achorElem = document.createElement("a");
var imgElem = document.querySelector("img[src='photo.jpg']");
achorElem.href=""+imgElem.src;
parentElem[0].appendChild(achorElem);
achorElem.appendChild(imgElem);
<div class="kg-gallery-image" style="flex: 0.708889 1 0%;">
<img src="photo.jpg"></div>

    var parentElem = $(".kg-gallery-image");
    var achorElem = document.createElement("a");
   // var imgElem = document.querySelector("img[src='photo.jpg']");
   var imgElem = $("img");
    achorElem.href=""+imgElem.attr("src");
    //parentElem[0].appendChild(achorElem);
    //achorElem.appendChild(imgElem); 
    imgElem.wrap(achorElem);
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 

       <div class="kg-gallery-image" style="flex: 0.708889 1 0%;">
    <img src="photo.jpg"></div>
...