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

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"];

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.

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