开发者社区 > 云原生 > 容器服务 > 正文

获取当前元素的属性,生成增加父容器,怎么写?

数据库拉出来的内容全部是

<img  alt="1" src="135.jpg" />
 <img  alt="2" src="230.jpg" />
  <img alt="3" src="333.jpg"  /> 
  <img  alt="4" src="427.jpg"  /> 
  <img  alt="5" src="530.jpg" />

jquery这么写

$(document).ready(function(){
 $("img").before("<a data-lightbox='roadtrip' href='"+$(this).attr("src")+"'>");
 $("img").after(</a>");

无法实现目标:

<a data-lightbox='roadtrip'  href="135.jpg"><img  alt="1" src="135.jpg" /></a>
<a data-lightbox='roadtrip'  href="230.jpg"><img  alt="2" src="230.jpg" /></a>
<a data-lightbox='roadtrip'  href="333.jpg"><img  alt="3" src="333.jpg"  /> </a>
<a data-lightbox='roadtrip'  href="427.jpg"><img  alt="4" src="427.jpg" /></a>
<a data-lightbox='roadtrip'  href="530.jpg"><img  alt="5" src="530.jpg" /></a>

是想抓取img实现相册浏览方式,上例是想通过jquery插件实现,是否还有其他方式实现我的目标?

展开
收起
a123456678 2016-07-11 16:16:05 1703 0
1 条回答
写回答
取消 提交回答
  • <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/lightbox-2.6.min.js"></script>
    <link href="css/lightbox.css" rel="stylesheet" />
      <script language="javascript" type="text/javascript">
    $(document).ready(function(){
        $("img").each(function(){
    $(this).wrap(function(){
    return "<a data-lightbox=\"roadtrip\" href=\""+$(this).attr("src")+"\">";
    });
    
    
     $("button").click(function(){
       $("img:first").click();
        });
      });
    });
    </script>
    </head>
    <body>
    <p><button >test</button></p>
    <div class="r3">
     <img class="alignleft size-full wp-image-1796" alt="1" src="135.jpg" width="696" height="891" />
     <img class="alignleft size-full wp-image-1797" alt="2" src="230.jpg" width="696" height="1015" />
      <img class="alignleft size-full wp-image-1798" alt="3" src="333.jpg" width="696" height="981" /> 
      <img class="alignleft size-full wp-image-1799" alt="4" src="427.jpg" width="696" height="1013" /> 
      <img class="alignleft size-full wp-image-1800" alt="5" src="530.jpg" width="696" height="984" />
    </div>
    </body>
    </html>
    
    2019-07-17 19:54:18
    赞同 展开评论 打赏
问答分类:
问答标签:

国内唯一 Forrester 公共云容器平台领导者象限。

相关电子书

更多
阿里云文件存储 NAS 在容器场景的最佳实践 立即下载
何种数据存储才能助力容器计算 立即下载
《容器网络文件系统CNFS》 立即下载