Hide Collection of jQuery elements in Array Using Hide()/Show()

Question

Seemingly-easy problem here: I'm trying to create a streamlined way to hide/show a collection of DOM elements using some jQuery/vanilla JS. This was from a refactor where several fragmented functions were re-done as better encapsulated versions of their former selves.

What these functions are trying to do take elements from an array (by ID), use map to convert them to jQuery objects, and then hide or show them.

Using jQuery 1.11 in an Angular project, but the angular aspect doesn't seem to interfere with this case, since it won't work in a jsFiddle either.

main problem: When I run the function (usually using a click event), I don't get any sort of error from console and I don't get any sort of result in the DOM either. Any ideas? I'm sure it's a simple thing I'm missing, but I need other eyes on it.

Here's a jsFiddle with the below code loaded in, ready for fixin'. Thanks!

http://jsfiddle.net/sLgqvdku/

function showItem(item) {
  return item.show();
}

function hideItem(item) {
    return item.hide();
}

function showItemsWithIDs(ids) {
  ids.map($).forEach(showItem);
}

function hideItemsWithIDs(ids) {
  ids.map($).forEach(hideItem);
}

var itemsHiddenToFocusTribute = ['#form', '#ask', "#submitButton", "#sidebar",           "#AmountCtrl", "#giftbutton"];

If you're using Angular anyway, ng-click and ng-hide are the right way to approach this. — Blazemonger
– Blazemonger, Commented Dec 10, 2014 at 17:47
True! I'm already using ng-click to fire, but there are some specific compatibility things w/ my particular app that make using ng-hide unnecessary :) — markthethomas
– markthethomas, Commented Dec 10, 2014 at 17:51

Blazemonger · Accepted Answer · 2014-12-10 18:55:03Z

2

It appears that only the first element in the array is actually being converted into a jQuery object in your code.

Here's what's happening: vanilla-JS .map passes three arguments to the specified callback function: the current element, the index, and the array.

If the callback function takes only one argument, the second and third are ignored. However, jQuery's $ actually allows two arguments: a selector, and a context (container element). So your code is passing (as the second argument) the array index as a context, resulting in an empty jQuery object -- except for the first element in itemsHiddenToFocusTribute, which has index 0 which is interpreted as no context at all.

You can fix this with an anonymous function that only passes the selector string to $:

function hideItemsWithIDs(ids) {
    ids.map(function (i) {
        return $(i);
    }).forEach(hideItem);
}

http://jsfiddle.net/mblase75/e23qgad5/

However, a more jQuery-friendly way would be to create a single jQuery object of all the desired elements and loop through them using .each:

function hideItem(i,item) {
    return $(item).hide();
}

function hideItemsWithIDs(ids) {
    $(ids.join()).each(hideItem);
}

http://jsfiddle.net/mblase75/mm2L4xn1/

This is probably more efficient, too, since you're calling $ just once instead of array.length times.

edited Dec 10, 2014 at 18:55

answered Dec 10, 2014 at 17:45

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

markthethomas Over a year ago

That's what I found, too, but wasn't sure why. Can you help me understand why that's happening in my code? Is it map?

Blazemonger Over a year ago

Yes, it is. Added explanation to my answer.

Blazemonger Over a year ago

Added second solution that illustrates the problem with map.

markthethomas Over a year ago

One more question: is i being passed as the index in the hideItem function?

Blazemonger Over a year ago

Yes, the $.each callback has two arguments: an index first, and a DOM element second.

bowheart · Accepted Answer · 2014-12-10 17:43:58Z

All you're wanting is to send each id through the foreach loop? Then I'd just use each like so:

$(ids).each(function(index, id) {
    hideItem(id);
});

You don't need to use map($) to convert them to jQuery objects, just put the object inside the dollar sign function call, like so: $(ids).

Also make sure you pass the actual id to showItem and hideItem when you call them, like so: hideItem(id). You also need to make sure that you use a jQuery object in your hideItem and showItem functions. I changed your code to this:

function showItem(item) {
    return $(item).show();
}

function hideItem(item) {
    return $(item).hide();
}

function showItemsWithIDs(ids) {
    $(ids).each(function(index, id) {
        showItem(id);
    });
}

function hideItemsWithIDs(ids) {
    $(ids).each(function(index, id) {
        hideItem(id);
    });
}

var itemsHiddenToFocusTribute = ['#form', '#ask', "#submitButton", "#sidebar", "#AmountCtrl", "#giftbutton"];


$('#clicker').click(function(){
    hideItemsWithIDs(itemsHiddenToFocusTribute);
});

And here's the updated Fiddle

Collectives™ on Stack Overflow

Hide Collection of jQuery elements in Array Using Hide()/Show()

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related