How to determine if $(this) is in array on click event

Question

I have a set of id values in 4 arrays. Each array will be assigned a text value for an h1 and a p that I haven't put in yet. Right now I'm just trying to get it to alert if one of the images in array graphicDesign is clicked. I tried using $.inArray

DEMO

var graphicDesign = [$('#design'), $('#DD'), $('#SElogo')];
var webDesign = [$('#bootstrap'), $('#farm'), $('#pong'), $('#SE'), $('#dung')];
var programming = [$('#SE'), $('#dung'), $('#sacar')];
var other = [$('#firm')];

function categories() {
  if ($.inArray(this, graphicDesign) > -1) {
    alert('hello');
  }
}

In your demo code, `this` will not be an element since you're calling it separately. Add `console.log(this)` to `categories()` and open your console (hit F12). You'll see what I mean. — Mike Cluck, May 03 '16 at 15:51
how to get the alert to work. Each image in my gallery has an ID, each ID is in one of my arrays, if the clicked image has an ID that is in x array than it should do a certain thing. Right now I'm just trying to target it properly by using alert — Shniper, May 03 '16 at 15:52
edited demo, I had the categories function in the wrong click function. Changed this to event.target, still not working — Shniper, May 03 '16 at 15:55
graphicDesign is an array of jquery object. Jquery selectors return array wich contains original object and i don't remember what. In order to show alert just replace you code by this if ($.inArray(event.target, graphicDesign[0]) > -1) but this is not the solution. You have to loop in all the elements of your array and compare with the first element — Madagaga, May 03 '16 at 16:02

score 6 · Accepted Answer · answered May 03 '16 at 15:57

6

You should not store DOM objects in an array and try to match them with $.inArray. Using ids or another attribute would be a better solution.

For example :

https://jsfiddle.net/1f9xd3t0/

var graphicDesign = ['design', 'DD', 'SElogo'];

function categories(id) {
  if ($.inArray(id, graphicDesign) > -1) {
    alert('hello');
  }
}  

categories('design');

answered May 03 '16 at 15:57

OlivierH

3,875
1
19
32

this is right solution, because $(this) and $('#...') has different references, and array keeps the references not their values – Vahe Shadunts May 03 '16 at 16:04
What if i need to check multiple ID´s, not just one? – ints Dec 11 '19 at 21:46
You can use array intersect, like described in this post : https://stackoverflow.com/questions/17805268/jquery-function-to-intersect-arrays-by-the-same-elements. – OlivierH Dec 12 '19 at 05:32

score 1 · Answer 2 · answered May 03 '16 at 15:58

You need to pass the event object to categories().

$('.portPic').click(function(e) {
  // ...
  categories(e);
});

function categories(e) {
  console.log(e.target);
  if ($.inArray(e.target, graphicDesign) > -1) {
    alert('hello');
  }
}

UPDATE

And maybe use id's rather than jQuery objects in your arrays.

var graphicDesign = ['design', 'DD', 'SElogo'];

Then use e.target.id in categories().

score 0 · Answer 3 · answered May 03 '16 at 15:56

0

You can use typeof , here is an example.

// Objects
typeof {a:1} === 'object';

// use Array.isArray or Object.prototype.toString.call
// to differentiate regular objects from arrays
typeof [1, 2, 4] === 'object';

answered May 03 '16 at 15:56

Sergi Case

226
2
12

score 0 · Answer 4 · answered May 03 '16 at 15:58

Array.indexOf() is a native function that does the same thing.

graphicDesign.indexOf(this) > -1 would be the equivalent of what you wrote.

In your usage, this is going to refer to the global object, unless you elsewhere assign this function to an object and call it as a method... But then you're trying to tell if the object you're calling it on is inside the graphicDesign array?

Here's an example of a usage that would fire the alert:

var graphicDesign = [ {} ]

graphicDesign[0].categories = function() {
  if (graphicDesign.indexOf(this) > -1) {
    alert('the object this method was called on is inside the graphicDesign array')
  }
}

graphicDesign[0].categories()

It's unclear exactly what you're trying to accomplish, however (you mention a click detection, but there's no click handler here, etc.)... I hope this helps?

score 0 · Answer 5 · answered May 03 '16 at 16:00

0

This block of $.inArray is working, but you put them in wrong place, it always returned -1, so you cannot get the alert('hello'). Please fix the overall logic.

  if ($.inArray(this, graphicDesign) > -1) {
    alert('hello');   }

answered May 03 '16 at 16:00

Jialing1000

21
1
1
6

How to determine if $(this) is in array on click event

5 Answers5