Wrap不適用于動態加載的元素。為什么？

其wrap();本身運行良好，但當它在 之后呼叫時load();，它不會。

可以做些什么來讓它發揮作用？我試圖將wrap();代碼放在單獨的 .js 檔案中，但這不起作用。我還嘗試加載wrap();inside:$( window ).on( "load", function() { ... })然后將其放在 html 的頁腳中，這也沒有解決問題。

這是我的代碼：

$('.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>

編輯 1# & 2#:

我需要將每個.gallery-item從https://webhelytervezo.hu/#gallery-1加載到帶有類（https://webhelytervezo.hu/en/）的頁面和帶有類（https:// /webhelytervezo.hu/en/）。該代碼僅適用于主頁（內容未加載但無需加載）。#partner.page-id-202.page-id-201

編輯3#

現在代碼是：

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');
     })
      });

我怎樣才能簡化它？

uj5u.com熱心網友回復：

加載是異步函式。將您的代碼放在 load 方法的回呼函式中。

$('.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');
     })   
})

uj5u.com熱心網友回復：

您需要將其包裹在img標簽周圍，而不是其前身：

$('.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>

標籤：

上一篇：AngularSidenav材質容器的內容不渲染

下一篇：順風不與npmrundev