Question

我试图编写一个删除所有数据属性的功能（＆＃39; data-pauze＆＃39;属性除外）。我今天下午写的那个有点有用，但并没有删除所有的。我需要运行它三次才能删除所有内容。

＆＃13;

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

＆＃13;

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

＆＃13;

我还制作了Codepen：http://codepen.io/frankbiemans/pen/VPRdjw。

你知道我做错了什么吗？谢谢您的帮助。

Answer 1

我认为问题在于使用indexOf，因为如果找不到项目，则返回-1，因此将!attr.indexOf('data-')替换为attr.indexOf('data-') == -1或!~attr.indexOf('data-')，其中~不是（~-1 == 0）。

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

此函数需要一个选择器指定项目和一组异常（省略＆＃34;数据 - ＆＃34;部分）。在你的情况下：

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

它可以重复使用。

Answer 3

问题在于您在迭代时修改列表。每次删除项目时索引都会更改。如果您有0，1，2项，并且删除了1，则2不再存在，因为该列表现在是0，{ {1}}。你可以通过向后迭代列表来快速解决这个问题（即1，2，1）

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: