position是javascript或jquery中的数组

Question

<div className="example" style="top:10;left:10"></div>  //array 1
<div className="example" style="top:100;left:100"></div>  //array 2
<div className="example" style="top:145;left:101"></div>  //array 3
<div className="example" style="top:120;left:150"></div>  //array 4
<div className="example" style="top:145;left:160"></div>  //array 5
<div className="example" style="top:10;left:120"></div>  //array 6
<div className="example" style="top:15;left:100"></div>  //array 7


<script>
var x = $(".example")[0].position();  //array 1 [0]
alert("Top: " + x.top + " Left: " + x.left);
</script>

I need to get the position of a certain div

but when I run the code I get error

VM163:1 Uncaught TypeError: $(...)[0].position is not a function(…)

Answer 1

Try this: http://jsbin.com/liliwarogo/1/edit

var x = $($(".example")[0]).position();  //array 1 [0]
alert("Top: " + x.top + " Left: " + x.left);

Basically, if you do $(".example")[0] it's not a jQuery element anymore, so position() doesn't exists. I wrapped everything up in jQuery again, to get the position() function.

Of course, the optimal solution would be something like this: $(".example:eq(0)").position()

Answer 2

This solution only use JavaScript.

var x = document.getElementsByClassName("example")[0].getBoundingClientRect();
alert("Top: " + x.top + " Left: " + x.left);

Here is the Jsbin example