JQuery-畫廊標題文本作為鏈接來包裝畫廊專案

我試圖wrap()在.gallery-items與text()那是一個URL從.gallery-caption。我的問題是所有的 url 都被提取并插入到a href"=https://s.

使它正常作業的正確方法是什么？先感謝您。

以下是我的嘗試：

$(".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 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/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.arkadbudapest.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><figure class="gallery-item">
            <div class="gallery-icon landscape">
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/bosch.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-42">
            </div>          
      

我也嘗試實作 $(this)... 但我可能用錯了它。

uj5u.com熱心網友回復：

您可以簡單地使用每個回圈，然后在此回圈中使用thiswhich 將參考被迭代的當前元素。

演示代碼：

$(".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 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/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.arkadbudapest.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>

標籤：

上一篇：如何在純JavaScript中單擊另一個單個元素時將css類切換為同一類的元素？

下一篇：使用jquery選擇單個附加輸入