CODEWITHSUNDEEP
javascriptjquery
James
James

Reputation: 478

$.inArray is giving -1?

This should be pretty straight forward:

HTML

<a href="url" id="thumba" data-id="26">my link</a>
<input type="hidden" id="pageids" value="28,27,26,17,18,19,">

Jquery

  var thumbaid = $('#thumba').data("id");
  // get position
    var itemids = $('#pageids').val(); 
    var itemids_array = itemids.split(',');
    var currentpos = $.inArray(thumbaid, itemids_array );
    alert(currentpos);

Gives me -1?

The funny thing is that if I replace " $(thumba).data("id")" for a number in the jquery code as "26", it works!

The result should be, in this case, "2".

Any ideas?

Upvotes: 1

Views: 96

Answers (5)

Popnoodles
Popnoodles

Reputation: 28409

You need to convert the value to a string.

var thumbaid = $('#thumba').data("id").toString();

Why...? If you were to 

console.log(itemids_array);

you would see this

["28", "27", "26", "17", "18", "19", ""]

They are not numbers, they are strings. See http://api.jquery.com/data/

Upvotes: 5

c.P.u1
c.P.u1

Reputation: 17094

$().data() will convert the data-* attribute's value to a JavaScript value. In your case, thumbaid is converted to a number.

$.inArray compares elements using the strict equality operator(===). That is, '26' === 26 returns false as no type coercion occurs.

From the jQuery.data() docs:

Every attempt is made to convert the string to a JavaScript value (this includes booleans, numbers, objects, arrays, and null). A value is only converted to a number if doing so doesn't change the value's representation. For example, "1E02" and "100.000" are equivalent as numbers (numeric value 100) but converting them would alter their representation so they are left as strings. The string value "100" is converted to the number 100.

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074028

jQuery's data function does things to the data it reads from the data-* attributes on initialization, including turning number-like strings into numbers. Since $.inArray does an === check, that's why it fails. You end up looking for the number 26 in an array of strings.

If you simply use .attr("data-id") instead, the conversion won't happen.

This behavior is documented in the data docs:

Every attempt is made to convert the string to a JavaScript value (this includes booleans, numbers, objects, arrays, and null). A value is only converted to a number if doing so doesn't change the value's representation. For example, "1E02" and "100.000" are equivalent as numbers (numeric value 100) but converting them would alter their representation so they are left as strings. The string value "100" is converted to the number 100.

If you're only using data to read data-* attributes, I recommend using attr instead to avoid this kind of thing, and to avoid the confusion caused by the fact that while data initializes from data-* attributes, it doesn't write to them when you set data. Of course, if you need to store data associated with elements and you don't want it on an attribute (because it's not string data, or you don't want it showing in the DOM inspector), data is the right tool for that job.

Upvotes: 2

Munim
Munim

Reputation: 6510

That is because the thumbaid is a number, and the itemids_array contains strings. Try var currentpos = $.inArray(thumbaid.toString(), itemids_array );

jQuery's data function reads the data- attributes and parses digits to numbers.

Upvotes: 2

CharliePrynn
CharliePrynn

Reputation: 3082

The reason its not working, is because jQuery data is returning an int not string.

See this example.

<a href="url" id="thumba" data-id="26">my link</a>
<input type="hidden" id="pageids" value="28,27,26,17,18,19,">

Javascript:

var thumbaid = $('#thumba').data('id').toString();

// get position
var itemids = $('#pageids').val(); 
var itemids_array = itemids.split(',');
console.log(itemids_array);
var currentpos = $.inArray(thumbaid, itemids_array );
console.log(currentpos);

Upvotes: 1

Related Questions