Correct way to add variable and selectors to a not function - jquery

Question

I have checked a few answers on SO and I think my syntax is correct, but something is not working correctly.

I am trying to create an array of jquery selectors mixed with variables and store them in a not() function.

I have this fiddle to demonstrate.

The second line of the function is not working:

var trigger = $('mainNav li:eq(0) a');
var headerLinks = $('#header a').not('.control a', + trigger);

My first thought was that #header a has more precedence over .control a in css terms. But changing classes and ID's doesn't seem to work.

Similarly I have a simpler var further in my code:

var content = $('.content');
var added = $('.extraList', + content);

In the console added is only returning the extraList selector.

1 Does the not function work differently to other jquery selectors? I was hoping to see the array of all the elements selected and/or filtered in the console

2 Is there a way to store the vars and selectors in a standard array and call that? I don't know how this would look exactly as jquery would need to interpret it, but something like this:

var arr = ['.control a', headerLinks, content, '.post'];

I realise that is mixing types but I am not sure how to pass both jquery variables and selectors into the same array, if it is possible.

Answer 1

For code var headerLinks = $('#header a').not('.control a', + trigger);

You can simply use chaing like

var headerLinks = $('#header a').not('.control a').not(trigger);

OR

var trigger = $('.control a, #mainNav li:eq(0) a'); //I am using here #mainNav
var headerLinks = $('#header a').not(trigger);

---

For var added = $('.extraList', + content);

You can use .add()

Create a new jQuery object with elements added to the set of matched elements.

var added = $('.extraList').add(content);

Answer 2

Thanks to @Satpal. Your answer definitely helped me, but here is what I did.

Store an array of jquery selectors to later exclude from the function, I can keep adding to or edit this variable. (I think this is neater as it has separated out the code a little more and it circumvents the parent/child issue):

var exclude = $('#mainNav li:eq(0) a, .control a, .social-links a');

Create another set of links to include in the function:

var headerLinks = $('#header a');
var contentLinks = $('.post a');

Merge selectors which are going to be used to trigger the function and also add the excluded selectors:

var merge = $.merge(headerLinks, contentLinks).not(exclude);

Now the click function:

merge.on('click',function(){});

Should fire for the links that I want, and not the ones that I don't.

I would still like to know how to store an array of jquery selectors and variables in a standard javascript array.

Updated fiddle: http://jsfiddle.net/lharby/gk7bmzqh/1/