1

The wrap(); works well on its own, but when it is called after the load();, it doesn't.

What could be done to make it work? I tried to put the wrap(); code inside a separate .js file, but that didn't work. I also tried to load the wrap(); inside: $( window ).on( "load", function() { ... }) and then place it inside the footer of the html, which didn't solve the problem either.

Here is my code:

$('.page-id-202 #partner, .page-id-201 #partner').load('https://webhelytervezo.hu/ #gallery-1');
     $(".gallery-item").each(function() {
     $(this).wrap($("<a/>").attr("href", "http://" + $(".gallery-caption", this).text().trim()));
     $("#gallery-1 a").attr('target','_blank');
});
figcaption{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="gallery-1" class="gallery galleryid-9 gallery-columns-3 gallery-size-full"><figure class="gallery-item">
            <div class="gallery-icon landscape">
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/cup_revolution_logo.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-49">
            </div>
                <figcaption class="wp-caption-text gallery-caption" id="gallery-1-49">
                www.web.cuprevolution.eu
                </figcaption></figure><figure class="gallery-item">
            <div class="gallery-icon landscape">
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/areklam.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-39">
            </div>
                <figcaption class="wp-caption-text gallery-caption" id="gallery-1-39">
                www.areklam.hu
                </figcaption></figure><figure class="gallery-item">
            <div class="gallery-icon landscape">
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/coca_cola.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-48">
            </div>
                <figcaption class="wp-caption-text gallery-caption" id="gallery-1-48">
                www.coca-cola.hu
                </figcaption></figure><figure class="gallery-item">
            <div class="gallery-icon landscape">
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/arkad.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-40">
            </div>
                <figcaption class="wp-caption-text gallery-caption" id="gallery-1-40">
                www.arkad.hu
                </figcaption></figure><figure class="gallery-item">
            <div class="gallery-icon landscape">
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/besttv.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-41">
            </div>
                <figcaption class="wp-caption-text gallery-caption" id="gallery-1-41">
                www.besttv.hu
                </figcaption></figure> 
        </div>

Edit 1# & 2#:

I need to wrap each .gallery-items of the #gallery-1 after it loaded from https://webhelytervezo.hu/ into the #partner div of page with the .page-id-202 class (https://webhelytervezo.hu/en/) and the page with the class .page-id-201 (https://webhelytervezo.hu/en/). The code works only on the main page (where the content is not loaded but there without needed to be loaded).

Edit 3#

Now the code is:

jQuery(document).ready(function( $ ){
$('.page-id-202 #partner, .page-id-201 #partner').load('https://webhelytervezo.hu/ #gallery-1', function(){
      $(".gallery-item").each(function() {
          $(this).wrap($("<a/>").attr("href", "http://" + $(".gallery-caption", this).text().trim()));
          $("#gallery-1 a").attr('target','_blank');
     })
});
  $(".gallery-item").each(function() {
          $(this).wrap($("<a/>").attr("href", "http://" + $(".gallery-caption", this).text().trim()));
          $("#gallery-1 a").attr('target','_blank');
     })
      });

How can I simplify it?

iorgv
  • 787
  • 2
  • 11
  • 26

2 Answers2

2

Load is asynchronous function. Put your code inside callback function of the load method.

$('.page-id-202 #partner, .page-id-201 #partner').load('https://webhelytervezo.hu/ #gallery-1', function(){
      $(".gallery-item").each(function() {
          $(this).wrap($("<a/>").attr("href", "http://" + $(".gallery-caption", this).text().trim()));
          $("#gallery-1 a").attr('target','_blank');
     })   
})
digitalniweb
  • 838
  • 1
  • 7
  • 15
  • Well yes, this should the right answer, but it doesn't work. Please, take a look at the site [here](https://webhelytervezo.hu/en/) – iorgv Jan 24 '22 at 15:21
  • If you go there and look at the source code: view-source:https://webhelytervezo.hu/en/ you can see there is no id="gallery-1" element sou you won't we able to load it. I guess they load it via js. – digitalniweb Jan 24 '22 at 15:50
  • True that it's loaded via JS. – iorgv Jan 24 '22 at 15:58
  • It is here though https://webhelytervezo.hu . It should work... – digitalniweb Jan 24 '22 at 15:58
  • The closing bracket was missing. `$('.page-id-202 #partner, .page-id-201 #partner').load('https://webhelytervezo.hu/ #gallery-1', function(){ $(".gallery-item").each(function() { $(this).wrap($("").attr("href", "http://" + $(".gallery-caption", this).text().trim())); $("#gallery-1 a").attr('target','_blank'); }) });` – iorgv Jan 24 '22 at 16:22
  • @iorgu Ok, I edited the answer so it is working. – digitalniweb Jan 24 '22 at 16:45
  • Yes, it does work. Many thanks. – iorgv Jan 24 '22 at 16:46
  • 1
    @iorgu I'll give you final advice. Use VScode or some other good code editor/IDE. If you used it you'd have seen immediately there is a missing bracket. I missed it here in wysiwyg editor. – digitalniweb Jan 24 '22 at 16:58
1

You need to wrap it around the img tag instead of its predecessor:

$('.page-id-202 #partner, .page-id-201 #partner').load('https://webhelytervezo.hu/ #gallery-1');
$(".gallery-item .gallery-icon img").each(function() {
    $(this).wrap($("<a/>").attr("href", "http://" + $(".gallery-caption", this.parentNode.parentNode).text().trim()));
    $("#gallery-1 a").attr('target','_blank');
});
figcaption{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="gallery-1" class="gallery galleryid-9 gallery-columns-3 gallery-size-full"><figure class="gallery-item">
            <div class="gallery-icon landscape">
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/cup_revolution_logo.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-49">
            </div>
                <figcaption class="wp-caption-text gallery-caption" id="gallery-1-49">
                www.web.cuprevolution.eu
                </figcaption></figure><figure class="gallery-item">
            <div class="gallery-icon landscape">
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/areklam.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-39">
            </div>
                <figcaption class="wp-caption-text gallery-caption" id="gallery-1-39">
                www.areklam.hu
                </figcaption></figure><figure class="gallery-item">
            <div class="gallery-icon landscape">
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/coca_cola.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-48">
            </div>
                <figcaption class="wp-caption-text gallery-caption" id="gallery-1-48">
                www.coca-cola.hu
                </figcaption></figure><figure class="gallery-item">
            <div class="gallery-icon landscape">
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/arkad.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-40">
            </div>
                <figcaption class="wp-caption-text gallery-caption" id="gallery-1-40">
                www.arkad.hu
                </figcaption></figure><figure class="gallery-item">
            <div class="gallery-icon landscape">
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/besttv.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-41">
            </div>
                <figcaption class="wp-caption-text gallery-caption" id="gallery-1-41">
                www.besttv.hu
                </figcaption></figure> 
        </div>
Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
  • No, this is not the case. I've edited the question in hope for better understanding. – iorgv Jan 24 '22 at 15:24
  • @iorgu, so when webhelytervező is loaded, some new items may appear and those are not properly wrapped? In my snippet an anchor was successfully wrapped around reklám and it actually works even from the snippet if I remove the target attribute. – Lajos Arpad Jan 24 '22 at 15:28
  • @Lajos_Arpad No and yes. I would like to load the `#gallery-1` div into the `#partner` div of the addressed pages (what is working well) and **then** apply the wrapping code to this loaded part at the webhelytervezo.hu/en and /de. – iorgv Jan 24 '22 at 15:37
  • @Lajos_Árpád the wrapping code has no flaw, it works at the main page where the #gallery-1 div is and not loaded dynamically, but on webhelytervezo.hu/en is the problem where the #gallery-1 has to be fetched from the main site. – iorgv Jan 24 '22 at 15:43
  • @iorgu understood. So you have some containers which you will with `$('.page-id-202 #partner, .page-id-201 #partner').load()`, but it is unclear to me where those contents are defined and what you get from webhelytervező. – Lajos Arpad Jan 24 '22 at 15:48
  • @Lajos_Árpád the `.page-id-201 #partner` is on the https://webhelytervezo.hu/en/ page and `.page-id-202 #partner` is on the https://webhelytervezo.hu/de/ page. I fetch the `#gallery-1` div from the https://webhelytervezo.hu/ (main site). – iorgv Jan 24 '22 at 15:53
  • @iorgu so the snippet that you have in the question has the structure fetched from that source and if you run the `$(".gallery-item").each(function() {...})` code after the fetch completed in your Dev Tools console, then it works. But when you have the same code just below the call to the `load` function, then it does not work. If this is the scenario, then I know what the issue is and what should be the solution. So, can you confirm that the issue is well understood? – Lajos Arpad Jan 24 '22 at 16:16
  • Árpád, the answer that @digitalniweb gave is the solution. It works now... he only missed a closing bracket from his code. – iorgv Jan 24 '22 at 16:36
  • @iorgu excellent. I'm glad that the problem was resolved. – Lajos Arpad Jan 24 '22 at 16:41
  • Thank you for your effort, dear Árpád. – iorgv Jan 24 '22 at 16:41
  • 1
    Your answer was relevant. I only realized this after I applied the main problem's solution. The wrapping is better on the `img` tag, and for that I also had to use it with the `this.parentNode.parentNode` selector - as you wrote it. – iorgv Feb 03 '22 at 19:19
  • 1
    @iorgu thanks for letting me know. It is important that it works now. Such wrapping is less prone to structural changes and is a more stable approach to cope with this kind of requirements, at least according to my experience. It is less likely that you would wrap other items around the inner tag, but inside the wrapping tag than adding a tag between a previous and a next. – Lajos Arpad Feb 04 '22 at 10:44