JQuery - Gallery caption text as link to wrap gallery items-CodePudding

I'm trying to wrap() the .gallery-items with the text() that is an url from the .gallery-caption. My problem is that all the urls are fetched and inserted into the a href"=https://s.

What would be the proper way to make it work correctly? Thank you in advance.

Below is my attempt:

$(".gallery-item").wrap($("<a/>").attr("href", "http://" $(".gallery-caption").text().trim()));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<figure >
            <div >
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/areklam.jpg"  alt="" loading="lazy" aria-describedby="gallery-1-39">
            </div>
                <figcaption  id="gallery-1-39">
                www.areklam.hu
                </figcaption></figure><figure >
            <div >
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/arkad.jpg"  alt="" loading="lazy" aria-describedby="gallery-1-40">
            </div>
                <figcaption  id="gallery-1-40">
                www.arkadbudapest.hu
                </figcaption></figure><figure >
            <div >
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/besttv.jpg"  alt="" loading="lazy" aria-describedby="gallery-1-41">
            </div>
                <figcaption  id="gallery-1-41">
                www.besttv.hu
                </figcaption></figure><figure >
            <div >
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/bosch.jpg"  alt="" loading="lazy" aria-describedby="gallery-1-42">
            </div>

I also tried to implement the $(this)... but I might have it used wrongly.

CodePudding user response：

You can simply use each loop and then inside this loop use this which will refer to current element which is iterated .

Demo Code :

$(".gallery-item").each(function() {
  $(this).wrap($("<a/>").attr("href", "http://"   $(".gallery-caption", this).text().trim()));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<figure >
  <div >
    <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/areklam.jpg"  alt="" loading="lazy" aria-describedby="gallery-1-39">
  </div>
  <figcaption  id="gallery-1-39">
    www.areklam.hu
  </figcaption>
</figure>
<figure >
  <div >
    <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/arkad.jpg"  alt="" loading="lazy" aria-describedby="gallery-1-40">
  </div>
  <figcaption  id="gallery-1-40">
    www.arkadbudapest.hu
  </figcaption>
</figure>
<figure >
  <div >
    <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/besttv.jpg"  alt="" loading="lazy" aria-describedby="gallery-1-41">
  </div>
  <figcaption  id="gallery-1-41">
    www.besttv.hu
  </figcaption>
</figure>