すべてのデータ属性を削除する機能、複数の実行が必要

Question

私はすべてのデータ属性（ 'data-pauze'属性を除く）を削除する関数を作成しようとしています。今日の午後に書いたものはちゃんと動作しますが、すべてを削除しません。私はすべてを削除するために3回それを実行する必要があります。 http://codepen.io/frankbiemans/pen/VPRdjw：

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ました。

あなたは私が間違っていることを知っていますか？ 助けてくれてありがとう。

Answer 1

問題は、反復処理中にリストを変更していることです。アイテムを削除するたびにインデックスが変更されます。 0、1、2のアイテムがあり、1を削除した場合、リストが0,1になっているため、2は存在しなくなりました。あなたはすぐに逆方向にリストを反復処理することによって、これを解決することができる（すなわち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

（For）は、現在のアイテムを収集して削除することは、言語に関係なく、決して良い考えではありません。座っているブランチを切り詰めているので、コードが期待どおりに機能していません。 配列を作成します（たとえば、各ループの値を[]にプッシュしてから削除します）。

編集： 昨日のサンプルに時間がかかりませんでした。ここでは後にしているものを実行するための汎用的な機能があります：

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); 
     }); 
    }); 
} 

この機能は、（「データ - 」の部分を省略）項目（複数可）及び例外の配列を指定するセレクタを期待しています。あなたの場合：

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

もう少し再利用可能です。

Answer 3

私は、アイテムが見つかったので、~はビット単位ではない（~-1 == 0）であり、attr.indexOf('data-') == -1または!~attr.indexOf('data-')に!attr.indexOf('data-')を交換しないでいなかった場合、それは-1をreturnesとして問題がのindexOfの使用であるとします。