Question

I use html’s data- attribute on a list of menu links in order to tie the links to the div ids of sections of content I want to open when the links are clicked. So if I have a hidden div called “#section1” – the link that would open that link is .

Currently, in order to find the div that matches this link, I use jquery .each() to loop through all the possible elements, but it seems like there should be a better way.

Does anybody know how I could streamline this code and find the matching element without having to run the code in a loop?

Here’s my code:

$('a.hidden_link').click(function(){
    section_ident = $(this).attr('data-ident');
    $('.hidden_section').each(function(index) {
        if ($(this).attr('data-ident') == section_ident){
            section_ref = $(this);
            section_ref.show();
        }
    });
});

Answer 1

This should work.

$('a.hidden_link').click(function(){
    $(".hidden_section[data-ident='"+$(this).attr('data-ident')+"']").show();
});

Jsfiddle, http://jsfiddle.net/playerace/H7jwb/