提问人:iorgv 提问时间:1/8/2022 最后编辑:iorgv 更新时间:1/8/2022 访问量:46
JQuery - 库标题文本作为换行库项的链接
JQuery - Gallery caption text as link to wrap gallery items
问:
我正在尝试使用来自的 url。我的问题是所有的 url 都被获取并插入到 s 中。wrap()
.gallery-items
text()
.gallery-caption
a href"=https://
使它正常工作的正确方法是什么?先谢谢你。
以下是我的尝试:
$(".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)...但我可能用错了。
答:
1赞
Swati
1/8/2022
#1
您可以简单地使用每个循环,然后在此循环中使用它将引用迭代的当前元素。this
演示代码:
$(".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>
评论
0赞
iorgv
1/23/2022
当html与jQuery动态加载时,如何使用此代码?链接
评论