如何刪除

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>標記。