I'm calling a function with an ID. This ID should be used to .show() the element(s) matched the selector and .hide() everything didn't.

function showAndHide(id){
    $('.container div').hide();
    $('.container div[data-id="'+id+'"]').show();
}

Is there a smarter way then this? I wanna avoid writing the part of the selector twice (.container div) and get a more clearly notation.

I'm calling a function with an ID. This ID should be used to .show() the element(s) matched the selector and .hide() everything didn't.

function showAndHide(id){
    $('.container div').hide();
    $('.container div[data-id="'+id+'"]').show();
}

Is there a smarter way then this? I wanna avoid writing the part of the selector twice (.container div) and get a more clearly notation.

• javascript
• jquery

• I think this way is just fine. – tymeJV Commented Jun 20, 2013 at 14:43
• If you want to do something "cooler" you should try another Framework, jQuery is overweight for this purpose. But if you have a large codebase in jQuery this is the best solution. – Ludo237 Commented Jun 20, 2013 at 14:45
• If you want, you'd rewrite it in one line: $('.container div').hide('fast',function(){if($(this).data('id') == id ) $(this).show();}); But your code is good. – Stanislav Terletskyi Commented Jun 20, 2013 at 14:52

6 Answers 6

You can use chaining & filtering:

$('.container div').hide().filter('[data-id="'+id+'"]').show();

The first selector selects all child divs in .container, so hide acts on all of those. The filter takes a subset of the first set based on the second selector (similar to .find() which acts on child elements). So the final show() is only acting on the filtered element.

A faster alternative to using filter() is to use not():

$('.container div').not('[data-id="'+ id +'"]').hide();

This way you've never having to actually use show() as you're never actually hiding it (less methods, improved speed, no unnecessary hiding/showing).

jsPerf here - it is much faster in all browsers, and double as fast as filter() in IE8/9.

I think this should do the trick.

$('.container div, .container div[data-id="'+id+'"]').toggle();

http://jsfiddle/XhjNs/

function showAndHide(id){
$('.container div').not('[data-id="'+id+'"]').hide();

}

There're a lot of "ways" to update your function.

You should check this Test made using the console.profile(); and console.profileEnd(); a really helpful Javascript methods (native).

The solution posted by @MorganTyle seems to be the best in term of calling and performance overall so you should follow him.

You can found an article about profiling Here

Something like this is maybe what you are looking for:

function showAndHide(id){
    $('.container div').each(function () {
        var t = $(this);
        if(t.data("id") == id) {
            t.show();
        } 
        else { 
            t.hide();
        }
    }
}