jQuery - 使用inArray（）查找jQuery对象的索引

Question

I have a few divs that I'd like to put into an array.

When I try to use jQuery.inArray(), my div (as a jQuery object) isn't found. Why not?

var myArray = [ $("#div1"), $("#div2"), $("#div3") ];

alert(jQuery.inArray($("#div1"),myArray)); // returns -1

Answer 1

$ creates a new jQuery collection object each time, so var a = $("div"), b = $("div") will actually be two different objects that don't equal each other.

Instead you can just use the selectors or some other identifying feature of the element.

var myArray = ["#div1", "#div2", "#div3"];

However it really depends on your use case.

Answer 2

Two objects are never the same, so when you do

var object1 = $('#div1');
var object2 = $('#div1');

even if you have the same element, the objects are not the same

If you use the same object, it works

var div1 = $('#div1');
var div2 = $('#div2');
var div3 = $('#div3');

var myArray = [ div1, div2, div3 ];

jQuery.inArray( div1 , myArray); // returns 0

Answer 3

You can't use .inArray() for object comparison by content.

I like the approach outlined here . It's very clean.

Answer 4

It's probably because each invocation of the jQuery constructor results in a new instance referring to the same DOM node. What would effectively allow you to demonstrate inArray looks something like this:

var $div1 = $('#div1'), 
    $div2 = $('#div2'), 
    myArray = [ $div1, $div2 ];

alert(jQuery.inArray($div1,myArray));

Answer 5

You are not storing any references to the jQuery objects, $("#div1") will return a new jQuery object containing your dom element, you are comparing two different jQuery objects containing the same dom element. inArray will work just fine if you are using the same reference in the array as when you do use the inArray method.

var arr = [],
    $d1 = $("#d1"),
    $d2 = $("#d2"),
    $d3 = $("#d3");

arr.push($d1, $d2, $d3);

console.log(jQuery.inArray($d3, arr));

or see http://jsfiddle.net/EQQ96/2/

Answer 6

You're better off creating an array of ids. When it you roll, you can then see if that id is in your array, and then move forward.

var possiblePositions = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]

function randomSpin(sides) {
 return Math.floor(Math.random() * (sides || 6) ) + 1;
}
var $currentPiece = $('piece.active');
var currentSpot = $currentPiece.attr('spotPosition');
var spin = randomSpin(6) + randomSpin(6);
var nextSpot = currentSpot + spin;

if (possiblePositions.indexOf(nextSpot)) {
    $('#div' + nextSpot).append($currentPiece);
}

Answer 7

If you were to use purely jQuery to manipulate the jQuery Collection then you can use the jQuery index() method. However, the index returned is the position of the element in the dom, not the order in which it was added to the collection. If you need to deal with the order of adding then you're better of using selector strings rather than jQuery Collection :

var myArray = $([]).add( "#div4" ).add( "#div3" ).add( "#div1" ).add( '#div2' );
console.log( myArray.index( $('#div3') ) ); //Output: 2

JS FIDDLE DEMO