删除所有数据属性的功能，需要多次运行

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）。