JavaScript批量替换标签的问题

Apache_nginx
  • 12

问题描述

Hi 各位:
现遇到一个问题,需要批量处理一下ID为wzleftb下的一些标签。希望有JS大神能帮忙看一下:

把所有a标签替换成li标签

需要处理的原html:

  <div class="wzleftb" id="wzleftb"> 
   <p style="text-align: center;">
       <a href="data/102129t32lrueuonnruum1.jpg" target="_blank"><img src="data/102129t32lrueuonnruum1.jpg" /></a>
       <a href="data/102129n8ir82wfvi9zd5c6.jpg" target="_blank"><img src="data/102129n8ir82wfvi9zd5c6.jpg" /></a>
       <a href="data/102129s29jk02wpt0wrew5.jpg" target="_blank"><img src="data/102129s29jk02wpt0wrew5.jpg" /></a>
   </p> 
  </div>

处理后的html:(把所有a标签替换成li标签)

  <div class="wzleftb" id="wzleftb"> 
       <li><img src="data/102129t32lrueuonnruum1.jpg" /></li>
       <li><img src="data/102129n8ir82wfvi9zd5c6.jpg" /></li>
       <li><img src="data/102129s29jk02wpt0wrew5.jpg" /></li>
  </div>

各位大神,我研究很长时间也没搞定,求助了啊。

回复
阅读 1.4k
3 个回答
吃瓜群众
  • 953
✓ 已被采纳
var wzleftb = document.querySelector('#wzleftb'),
  imgList = wzleftb.querySelectorAll('img'),
  dom = document.createDocumentFragment(); // 利用代码块提高渲染

for (var i = 0, len = imgList.length; i < len; i++) {
  var li = document.createElement('li');
  li.appendChild(imgList[i]);
  dom.appendChild(li); // 放进代码块即刻进行解析,提升性能
}
wzleftb.innerHTML = ''; // 清空原来的内容
wzleftb.appendchild(dom); // 填充内容
哈尔的移动城堡
  • 3
新手上路,请多包涵
     var html="";
      $.each($("img"),function(index,value){
          html+="<li><img src="+$(this).attr("src")+"/></li>";
      })
      $("div").html(null);
      $("div").append(html);
var tag = '';
$('#wzleftb a').each(function(i,item){
    $(item).find('img').wrap('<li></li>');
    tag += $(item).html();
    $('#wzleftb').html(tag)
})
宣传栏