刪除所有數據屬性的功能，需要多次運行

Question

我正在嘗試編寫一個刪除所有數據屬性（'data-pauze'屬性除外）的函數。我今天下午寫的一篇有點作品，但並沒有刪除所有的'米'。我需要運行三次以刪除所有內容。

function removeAllDataAttributes() { 
 
    $('section').each(function(a, b) { 
 
    var section = $(this); 
 
    $.each(this.attributes, function(a, b) { 
 
     if (b !== undefined) { 
 
     var attr = b.name; 
 
     if (attr != 'data-pauze' && !attr.indexOf('data-')) { 
 
      console.log(attr); 
 
      section.removeAttr(attr); 
 
     } 
 
     } 
 
    }); 
 
    }); 
 
} 
 

 
$('button').click(function() { 
 
    removeAllDataAttributes(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 

 
<button>Remove data stuff</button> 
 

 
<section id="one" data-0="top: 0px;" data-737="top: -737px;" class="skrollable skrollable-between" style="top: 0px;"> 
 
    <h1>One</h1> 
 
</section> 
 

 
<section id="two" data-0="top: 737px;" data-737="top: 0px;" data-1397="top: -660px;" class="skrollable skrollable-between" style="top: 737px;"> 
 
    <h1>Two</h1> 
 
</section> 
 

 
<section id="three" data-pauze="slider" data-0="top: 1397px;" data-1397="top: 0px;" data-7397="top: 0px;" data-7857="top: -460px;" class="skrollable skrollable-between" style="top: 1397px;"> 
 
    <h1>Three</h1> 
 
</section> 
 

 
<section id="four" data-1397="top: 460px;" data-7397="top: 460px;" data-0="top: 1857px;" data-7857="top: 0px;" data-8594="top: -737px;" class="skrollable skrollable-between" style="top: 1857px;"> 
 
    <h1>Four</h1> 
 
</section> 
 

 
<section id="five" data-0="top: 8594px;" data-8594="top: 0px;" data-9331="top: -737px;" class="skrollable skrollable-between" style="top: 8594px;"> 
 
    <h1>Five</h1> 
 
</section> 
 

 
<section id="six" data-pauze="slider" data-0="top: 9331px;" data-9331="top: 0px;" data-15331="top: 0px;" data-16068="top: -737px;" class="skrollable skrollable-between" style="top: 9331px;"> 
 
    <h1>Six</h1> 
 
</section> 
 

 
<section id="seven" data-9331="top: 737px;" data-15331="top: 737px;" data-0="top: 10068px;" data-16068="top: 0px;" data-16805="top: -737px;" class="skrollable skrollable-between" style="top: 10068px;"> 
 
    <h1>Seven</h1> 
 
</section> 
 

 
<section id="eight" data-0="top: 16805px;" data-16805="top: 0px;" class="skrollable skrollable-between" style="top: 16805px;"> 
 
    <h1>Eight</h1> 
 
</section>

我還做了Codepen：http://codepen.io/frankbiemans/pen/VPRdjw。

你們有什麼想法我做錯了嗎？ 感謝您的幫助。

Answer 1

問題在於您在迭代它時正在修改列表。索引在每次刪除項目時都在變化。如果您有項目0,1,2並且您刪除1,2不再存在，因爲列表現在是0,1。您可以通過循環列表向後迅速解決這個（即2，1，0）

function removeAllDataAttributes() { 
 
    $('section').each(function(a, b) { 
 
    for(var i = this.attributes.length - 1; i >= 0; i--) { 
 
     var attr = this.attributes[i].name; 
 
     if(attr !== 'data-pauze' && !attr.indexOf('data-')) { 
 
     console.log(attr); 
 
     this.removeAttribute(attr); 
 
     } 
 
    } 
 
    }); 
 
} 
 

 
$('button').click(function() { 
 
    removeAllDataAttributes(); 
 
});

[data-pauze] { 
 
    color: green; 
 
} 
 

 
[data-0], 
 
[data-1397], 
 
[data-15331], 
 
[data-16068], 
 
[data-16805], 
 
[data-737], 
 
[data-7397], 
 
[data-7857], 
 
[data-8594], 
 
[data-9331] { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 

 
<button>Remove data stuff</button> 
 

 
<section id="one" data-0="top: 0px;" data-737="top: -737px;" class="skrollable skrollable-between" style="top: 0px;"> 
 
    <h1>One</h1> 
 
</section> 
 

 
<section id="two" data-0="top: 737px;" data-737="top: 0px;" data-1397="top: -660px;" class="skrollable skrollable-between" style="top: 737px;"> 
 
    <h1>Two</h1> 
 
</section> 
 

 
<section id="three" data-pauze="slider" data-0="top: 1397px;" data-1397="top: 0px;" data-7397="top: 0px;" data-7857="top: -460px;" class="skrollable skrollable-between" style="top: 1397px;"> 
 
    <h1>Three</h1> 
 
</section> 
 

 
<section id="four" data-1397="top: 460px;" data-7397="top: 460px;" data-0="top: 1857px;" data-7857="top: 0px;" data-8594="top: -737px;" class="skrollable skrollable-between" style="top: 1857px;"> 
 
    <h1>Four</h1> 
 
</section> 
 

 
<section id="five" data-0="top: 8594px;" data-8594="top: 0px;" data-9331="top: -737px;" class="skrollable skrollable-between" style="top: 8594px;"> 
 
    <h1>Five</h1> 
 
</section> 
 

 
<section id="six" data-pauze="slider" data-0="top: 9331px;" data-9331="top: 0px;" data-15331="top: 0px;" data-16068="top: -737px;" class="skrollable skrollable-between" style="top: 9331px;"> 
 
    <h1>Six</h1> 
 
</section> 
 

 
<section id="seven" data-9331="top: 737px;" data-15331="top: 737px;" data-0="top: 10068px;" data-16068="top: 0px;" data-16805="top: -737px;" class="skrollable skrollable-between" style="top: 10068px;"> 
 
    <h1>Seven</h1> 
 
</section> 
 

 
<section id="eight" data-0="top: 16805px;" data-16805="top: 0px;" class="skrollable skrollable-between" style="top: 16805px;"> 
 
    <h1>Eight</h1> 
 
</section>

Answer 2

（對於）每一個通過一個集合並刪除當前項目從來都不是一個好主意，不管語言如何。你正在砍掉你正在坐的分支，這就是爲什麼你的代碼不能按預期工作。 創建一個數組（例如，將每個循環中的值推入某個[]），然後刪除它們。編輯： 昨天沒有太多時間抽樣。下面就來執行你以後的通用功能：

function remDataAttributes(item, exceptions) { 
    var arr = [ ]; 
    $(item).each(function (i) 
    { 
     $.each(this.attributes, function() { 
      if (this.specified && this.name.startsWith("data-") && $.inArray(this.name.substr(5), exceptions)<0) 
       arr.push(this.name); 
     }); 
     var self =$(this); 
     arr.forEach(function(e) { 
      self.removeAttr(e); 
     }); 
    }); 
} 

此函數需要選擇指定項目（S）和異常的數組（省略「數據 - 」部分）。在你的情況下：

remDataAttributes('section', [ 'pauze' ]); 

它有點更可重複使用。

Answer 3

我想這個問題是使用的indexOf的，因爲它returnes -1如果沒有找不到的項目，所以更換!attr.indexOf('data-')到attr.indexOf('data-') == -1或!~attr.indexOf('data-')，其中~是一個位不（~-1 == 0）。