I have a list that dynamically updates based on if certain sections are available.

I'm creating two arrays based on data-attributes and paring them for differences. In other words, in my list if there are no data-letters matching the section letters than give it a background.

It works great except on Internet Explorer. In IE11 they all get a red background and I don't know why. You can see this in action here:

$(function() {
	var attrFilterItemArray = new Array();
  $(".atoz li a").each(function() {
    var attrItem = $(this).data("letter");
    attrFilterItemArray.push(attrItem)
  });

  var attrTitleArray = new Array();
  $(".letter-list__authors-titles, .letter-grid__authors-titles").each(function() {
    var attrTitle = $(this).data("title");
    attrTitleArray.push(attrTitle)
  });

  var pareTitleFilter = attrFilterItemArray.filter(function(n) {
    return !this.has(n)
  }, new Set(attrTitleArray));

  for (var i = 0; i < pareTitleFilter.length; i++) {
    $(".atoz li a").each(function() {
      var letter = $(this).data("letter");
      if (letter == pareTitleFilter[i]) {
        $(this, "#filter li a").addClass("filter-item--disabled").parent().addClass("filter-item--disabled").addClass("title-unavailable");
      }
    });
  }
});

.filter-item--disabled {
  background-color: red;
}

.alphabet {
  font-size: 40px;
}

<script src=".1.1/jquery.min.js"></script>
<ul id="filter" class="atoz letter-list__author-nav">
    <li><a data-letter="#" href="#" class="filter-item">#</a></li>
    <li><a data-letter="a" href="#" class="filter-item">a</a></li>
    <li><a data-letter="b" href="#" class="filter-item">b</a></li>
    <li><a data-letter="c" href="#" class="filter-item">c</a></li>
</ul>

<section data-type="title" data-title="#" class="letter-list__authors-titles">
<span class="alphabet">#</span>
</section>
<section data-type="title" data-title="a" class="letter-list__authors-titles">
<span class="alphabet">#</span>
</section>
<section data-type="title" data-title="c" class="letter-list__authors-titles">
<span class="alphabet">#</span>
</section>

I have a list that dynamically updates based on if certain sections are available.

I'm creating two arrays based on data-attributes and paring them for differences. In other words, in my list if there are no data-letters matching the section letters than give it a background.

It works great except on Internet Explorer. In IE11 they all get a red background and I don't know why. You can see this in action here:

$(function() {
	var attrFilterItemArray = new Array();
  $(".atoz li a").each(function() {
    var attrItem = $(this).data("letter");
    attrFilterItemArray.push(attrItem)
  });

  var attrTitleArray = new Array();
  $(".letter-list__authors-titles, .letter-grid__authors-titles").each(function() {
    var attrTitle = $(this).data("title");
    attrTitleArray.push(attrTitle)
  });

  var pareTitleFilter = attrFilterItemArray.filter(function(n) {
    return !this.has(n)
  }, new Set(attrTitleArray));

  for (var i = 0; i < pareTitleFilter.length; i++) {
    $(".atoz li a").each(function() {
      var letter = $(this).data("letter");
      if (letter == pareTitleFilter[i]) {
        $(this, "#filter li a").addClass("filter-item--disabled").parent().addClass("filter-item--disabled").addClass("title-unavailable");
      }
    });
  }
});

.filter-item--disabled {
  background-color: red;
}

.alphabet {
  font-size: 40px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filter" class="atoz letter-list__author-nav">
    <li><a data-letter="#" href="#" class="filter-item">#</a></li>
    <li><a data-letter="a" href="#" class="filter-item">a</a></li>
    <li><a data-letter="b" href="#" class="filter-item">b</a></li>
    <li><a data-letter="c" href="#" class="filter-item">c</a></li>
</ul>

<section data-type="title" data-title="#" class="letter-list__authors-titles">
<span class="alphabet">#</span>
</section>
<section data-type="title" data-title="a" class="letter-list__authors-titles">
<span class="alphabet">#</span>
</section>
<section data-type="title" data-title="c" class="letter-list__authors-titles">
<span class="alphabet">#</span>
</section>

In my research I found that Set() is not supported in IE. I changed that piece to:

  var pareTitleFilter = attrFilterItemArray.filter(function(n) {
    return !attrTitleArray.includes(n);
  });

But then the disabled class never gets added.

Which is seen in the fiddle. But it still does not work in IE. I could not find any viable alternatives or polyfills to help plete the job.

How can I get this array/data-attribute filter to work in IE?

• javascript
• jquery
• arrays
• internet-explorer

Share Improve this question Follow edited Jun 21, 2018 at 19:33 kawnah asked Jun 21, 2018 at 19:30 kawnahkawnah 3,43488 gold badges6464 silver badges117117 bronze badges 3

• it's IE11. I haven't tested this on older ones and it's not necessary. – kawnah Commented Jun 21, 2018 at 19:33
• Does IE11 support the includes method in your filter function? – Dan Zuzevich Commented Jun 21, 2018 at 19:34
• Side note, your first two usages of each() are prime examples of where map() can be used. – Taplar Commented Jun 21, 2018 at 19:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Array.prototype.includes() is not supported in any version of IE. See patibility table. You can test the old way, using indexOf:

var pareTitleFilter = attrFilterItemArray.filter(function(n) {
    return attrTitleArray.indexOf(n) === -1;
});