如何删除

Question

我将此脚本用于进度条：

$('.progress-bars li').each(function(i){  
  var percent = $(this).find('.spann').attr('data-width');
  var $endNum = parseInt($(this).find('.spann strong i').text());
  var $that = $(this);

  $(this).find('.spann').animate({
    'width' : percent + '%'
  },1600, function(){
  });

  $(this).find('.spann strong').animate({
    'opacity' : 1
  },1400);  

  $(this).find('.spann strong i').countTo({
    from: 0,
    to: $endNum,
    speed: 1200,
    refreshInterval: 30,
    onComplete: function(){}
  });  

  if(percent == '100'){
    $that.find('.spann strong').addClass('full');
  }     
});   

我使用<i></i>标记查找countTo函数的数字。 我的问题是我想在运行countTo脚本后删除这些<i>标记。

例：

<ul class="progress-bar"> 
    <li>
         <p>Video production</p>
         <div class="bar-wrap"><div class="spann" data-width="100"><strong><i>100</i>% </strong><div class="arrow"></div></div> </div>
    </li> 
    <li>
            <p>IOS Development</p>
            <div class="bar-wrap"><div class="spann" data-width="80"><strong><i>80</i>% </strong><div class="arrow"></div></div> </div>
    </li>
</ul>

运行脚本后，我想删除<i></i>标记并保留编号。

Answer 1

  var Is = document.querySelector(".progress-bar").querySelectorAll("i"); Array.prototype.map.call(Is, function(element){ var content = element.childNodes[0]; element.parentNode.replaceChild(content, element); }); 

 <ul class="progress-bar"> <li> <p>Video production</p> <div class="bar-wrap"><div class="spann" data-width="100"><strong><i>100</i>% </strong><div class="arrow"></div></div> </div> </li> <li> <p>IOS Development</p> <div class="bar-wrap"><div class="spann" data-width="80"><strong><i>80</i>% </strong><div class="arrow"></div></div> </div> </li> </ul> 

这将搜索进度栏中的所有i元素，对其进行迭代并删除它们，同时将内容附加到i元素的父元素。

Answer 2

您可以在调用countTo脚本后使用以下一行代码：

$( "i" ).contents().unwrap();

这将选择所有<i>标记。 .contents()获取<i>内的文本， .unwrap()删除内容的父级，即<i>标记。