for loop returning individual letters of one item in array and not each item in the array

Question

I have to arrays that I have made. One grabs some anchor tags and the other a set of ul's. The anchor tags all have a name attribute and the ul's have id's that match the anchor tags name attribute. In addition to this, all the ul's have the class ".students" and ".hidden". (all the .hidden does is set the display:none)

<div>
  <ul>
      <li><h4><a name="5th-grade">5th Grade</a></h4></li>
      <li><h4><a name="6th-grade">6th Grade</a></h4></li>
      <li><h4><a name="7th-grade">7th Grade</a></h4></li>
      <li><h4><a name="8th-grade">8th Grade</a></h4></li>
  </ul>
</div>
<div>
  <ul id="5th-grade" class="students hidden ">
      <li>Billy Bob</li>
  </ul>

  <ul id="6th-grade" class="students hidden">
      <li>Bob Sackamano</li>
  </ul>

  <ul id="7th-grade" class="students hidden">
      <li>Matt Blunt</li>
  </ul>
</div>

What I am trying to do is have it so when I click on one of the anchor tags, it will match it's corresponding name attribute to the ul with the same id, make it appear by removing the ".hidden" class, and then hide any other ul's that do not match by adding the ".hidden" class.

Here is what I have come up with so far using a little jquery and where I stopped:

    var aGradelist = $('#grade-list ul li a');
    var aStudents = $('.students');

    aGradelist.click(function(){
        var i = '#' + $(this).attr('name');

        $('.students'+i).removeClass('hidden');

        for(var j=0;j<aStudents.length;j++)
        {
           console.log(aStudents.attr('id')[j]);
        }

});

It's no problem getting the correct ul's to appear, but I couldn't add the ".hidden" class to the other ul's. I consoled it found that at least one of my problems is in the for loop, I am not going through each ul's in the aStudents array, but through the letters of the id of the first item in the aStudents array.

Am I even approaching this the right way? Have you got some ideas of how to do this?

Answer 1

Provided your html is valid (no duplicated IDs) this should do the trick.

var aGradelist = $('#grade-list ul li a');
var aStudents = $('.students');
aGradelist.click(function() {
    aStudents.addClass('hidden');
    $('#' + $(this).attr('name')).removeClass('hidden');
});

jQuery iterates over the DOM elements out of the box when you call methods on it.

Also, if you want to know what was wrong with your initial loop, you should use [j] before retrieving the id attribute which is a string. So to retrieve the id property properly:

for(var j=0;j<aStudents.length;j++) {
   console.log(aStudents[j].id);
}

$()[j] is a shorthand for $().get(j) ( jQuery.fn.get docs ).

Answer 2

Try this:

var aGradelist = $('#grade-list ul li a');
var aStudents = $('.students');

aGradelist.click(function(){
    var i = '#' + $(this).attr('name');
    aStudents.addClass('hidden');
    $('ul' + i).removeClass('hidden');
}

What this does is add the hidden class to all the ul s and then remove it only from that ul which has the id of the anchor that was clicked