passing a data-attribute conditional statement into a loop crashes browser

Question

Working on code where if you are clicking on something and the data attribute of the clicked link and a section don't match, hide it. I'm attempting to do this by looping through the title elements that don't match the data-attribute of the clicked link.

Below is the code with comments of my intention:

var titles = document.querySelectorAll(".authors-titles")
$(".filter-item").click(function(e) {
  e.preventDefault();

  // get data attribute of clicked link
  var targetLetter = $(this).attr("data-letter");

  // I try to loop through only the titles with data attributes that dont match the clicked link
  // I'm not sure about implementation but basically for titles who aattributes are not equal to the one gotten through the link
  for (var i = 0; i < titles.dataset != targetLetter; i++) {
    // hide the elements that get returned in this loop, in this case the non matched data attributes
    $(".authors-titles").css("display", "none");
  }
});

The markup sample:

<ul id="filter">
        <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-title="a" class="authors-titles">
      <span class="alphabet">#</span>
      <div class="filter-item-grid">
        <div class="filter-item">
          <h3 class="filter-title">1984</h3>
          <p>By: <a href="#">George Orwell</a> </p>
        </div>
        <div class="filter-item">
          <h3 class="filter-title">2001: A Space Oddyseey</h3>
          <p>By: <a href="#">Author C. Clark</a> </p>
        </div>
      </div>
    </section>

So basically all I'm really trying to do is see if data-letter and data-title don't match, then hide it.

My main question is this code triggers an infinity loop and completely crashes my browser but I don't understand why. I tried adding length to this line:

for (var i = 0; i < titles.length.dataset != targetLetter; i++) {

But I get the same result.

Answer 1

HTMLElement.dataset is an object of the custom data-attributes.

 $(".filter-item").click(function(e) { e.preventDefault(); var letter = this.dataset.letter; // loop through the sections $(".authors-titles").each(function () { // show section only if title is equal to letter $(this).toggle(this.dataset.title === letter); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="filter"> <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-title="a" class="authors-titles"> a</section> <section data-title="b" class="authors-titles"> b</section> <section data-title="c" class="authors-titles"> c</section> 

Also, no need to use document.querySelector* if you are using jQuery.