Question

First time I ask something here, I hope you people will be as helpful as ever.

I am making a script in Javascript(using some jQuery as well) that’s supposed to do this:
Suppose we have a page with user posts. If someone clicks on a user’s name, on one of the posts, the script will highlight every other post of the same user.
If the posts of a user are already highlighted, and we click on another user’s name, in another post, then all the previously highlighted posts must return to normal state, and now the posts of the other user must be highlighted instead.

The script I have written is this.

$(function (){
    $(".showall").click(function() {
        var identifier = this.innerHTML;

        var already = document.getElementsByClassName("highlight");
        var l = already.length;

        if (l) {            
            for (i=0; i<l; i++) {
                var to_hide = already[i].id;
                $("#"+to_hide).toggleClass("highlight");
            }
        }

        var sum = document.getElementsByClassName("uid_"+identifier)
        var l = sum.length;
        for (i=0; i<l; i++) {
            var to_show = sum[i].parentNode.parentNode.parentNode.id;
            $("#"+to_show).toggleClass("highlight");
        }

    });

});

Let me explain a little what it does.

When the click event is triggered on one of the specified elements, it stores the user identifier, and then checks to see if there are already highlighted comments, by checking the document for the “highlight” class.

If there are highlighted comments, it’s SUPPOSED TO remove the highlight class, from each and every one of them, and then, based on the user identifier, to highlight any other posts accordingly.

The problem with the script occurs in the loop inside the if(l) {} conditional, here

if (l) {            
    for (i=0; i<l; i++) {
        var to_hide = already[i].id;            
        $("#"+to_hide).toggleClass("highlight");
    }
}

When removing the highlight class, it does so by skipping every other post, and only does the loop for half the length.

For example, say I highlighted a user’s posts. That user had 14 posts, so, all 14 of them get highlighted. Now, if I want to highlight the posts of another user, and click on his name, the script will remove the highlight from the previous posts like this:

Remove highlight from post No1
Remove highlight from post No3
Remove highlight from post No5
Remove highlight from post No7
Remove highlight from post No9
Remove highlight from post No11
Remove highlight from post No13

When I will click on another username again, it will
Remove highlight from post No2
Remove highlight from post No6
Remove highlight from post No10
Remove highlight from post No14

etc.

I do not understand why the loop behaves that way.
I have removed the line with the .toggleClass and made it so that it alerts for every element of the array, and it did so for the whole length, not half the length, without skipping elements.

It’s like when I use the .toggleClass the i gets incremented by 2, and I, for the love of me, cannot understand why. I have also tried to do it with .classList.toggle, without using jQuery, and it’s the same thing again.

Any help will be much appreciated.
Regards to you all.

EDIT: Forgot to add, that Chrome’s console gives me this error, for the posts that the script is skipping:
Uncaught TypeError: Cannot read property ‘id’ of undefined.
I understand what it means, it’s like it did not find a valid object to read the id property, but I do not understand why it happens.

Answer 1

Your code seems overly complex.

Would something like this work for your use case?

$('.user-name').click(function (e) {
    e.preventDefault();
    var user_id = $(this).parent().data('userid');

    if (!$(this).parent().hasClass('selected')) {    
        $('.post.selected').removeClass('selected');
        $('.post[data-userId='+ user_id +']').addClass('selected');
    } else {
        $('.post.selected').removeClass('selected');
    }
});