Solved

Get the first value of array - Javascript or Jquery

Posted on 2013-01-22
9
242 Views
Last Modified: 2013-01-27
Hi E's, I have this code:
$(document).ready(function(){ 

(function($,undefined) {
    $.fn.extend({    
        getByPosition:function(position)
        {
            var type;
            if(position.top&&position.left)
                type=1;
            else if(position.top)
                type=2;
            else if(position.left)
                type=3;     
            return this.filter(function(){
                var pos=$(this).position();
                var ok=true;
                switch(type)
                {
                    case 1:
                        ok=pos.top==position.top&&pos.left==position.left;    
                    break;
                    case 2:
                        ok=pos.top==position.top;
                    break;
                    case 3:
                        ok=pos.left==position.left;
                    break;
                }
                return ok;
            });          
        }
    })
})(jQuery);

 
   elements=$('div').getByPosition({top:150,left:50});
   $results=$('#results');
   $.each(elements,function(i,e){
      $results.append($(e).attr('id')+'<br/>');
   }); 
})

Open in new window

That code serves to identify the name of the div that have determinate "top" and "left" positions. I think the Output is a array.
I need help to put the first value of the array [0], into a normal variable, like in PHP ($var1 = $somearray[0]).
How I put the result in a normal variable?

The best regards, JC
0
Comment
Question by:Pedro Chagas
9 Comments
 
LVL 35

Assisted Solution

by:YZlat
YZlat earned 250 total points
ID: 38807193
you can get first value of an array using

$(myarray).first()

Open in new window

0
 
LVL 20

Assisted Solution

by:Russ Suter
Russ Suter earned 250 total points
ID: 38807200
It's as simple as:

var myVariable = myArray[0];

Or is there something else to this question that I'm missing?
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 38807620
Hi, I tried both solutions, but the results were not what I expect.
In practice, with the actual "top" and "left" positions, I expect the result "q1".
I use the code of @YZlat:
var value = $(elements).first()
alert(value);  

Open in new window

and the output is:
@Yzlat solution outputI use the code of @Russ_Suter:
var value = elements[0];
alert(value); 

Open in new window

and the output is:
@Russ_Suter solution outputThe result I want is "q1".

~JC
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 18

Expert Comment

by:nap0leon
ID: 38807672
Can you post the rendered HTML to work with?
I presume some DIVs are needed for this to actually do anything and want to make sure we are looking at the same DIV structures.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Q_28004588</title>
	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

</head>

<body>
<script>
$(document).ready(function(){ 

(function($,undefined) {
    $.fn.extend({    
        getByPosition:function(position)
        {
            var type;
            if(position.top&&position.left)
                type=1;
            else if(position.top)
                type=2;
            else if(position.left)
                type=3;     
            return this.filter(function(){
                var pos=$(this).position();
                var ok=true;
                switch(type)
                {
                    case 1:
                        ok=pos.top==position.top&&pos.left==position.left;    
                    break;
                    case 2:
                        ok=pos.top==position.top;
                    break;
                    case 3:
                        ok=pos.left==position.left;
                    break;
                }
                return ok;
            });          
        }
    })
})(jQuery);

 
   elements=$('div').getByPosition({top:150,left:50});
   $results=$('#results');
   $.each(elements,function(i,e){
      $results.append($(e).attr('id')+'<br/>');
   }); 
})
</script>
</body>
</html>

Open in new window

0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 38807761
My apologies to @YZlat and @Russ_Suter, because they don't see the code can't give me the right solution.
Here is the code divided in two files:
index.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script src="jquery.ext.js" type="text/javascript"></script>
<title>Get the element with....</title>
<style>
#q1{position: absolute; width: 100px; height: 100px; left: 50px; top: 150px; background-color: black;}
#q2{position: absolute; width: 100px; height: 100px; left: 150px; top: 150px; background-color: green;}
#q3{position: absolute; width: 100px; height: 100px; left: 250px; top: 550px; background-color: yellow;}
#q4{position: absolute; width: 100px; height: 100px; left: 350px; top: 650px; background-color: red;}
#q5{position: absolute; width: 100px; height: 100px; left: 450px; top: 750px; background-color: blue;}
</style>
</head>
<body>
<div id="q1">a</div>
<div id="q2">b</div>
<div id="q3">c</div>
<div id="q4">d</div>
<div id="q5">e</div>
</div>
<div id="results"></div>
</body>
</html> 
<script type="text/javascript">
$(document).ready(function(){  
   elements=$('div').getByPosition({top:150,left:50});
   $results=$('#results');
   $.each(elements,function(i,e){
      $results.append($(e).attr('id')+'<br/>');
   }); 
})
</script>

Open in new window

jquery.ext.js code:
(function($,undefined) {
    $.fn.extend({    
        getByPosition:function(position)
        {
            var type;
            if(position.top&&position.left)
                type=1;
            else if(position.top)
                type=2;
            else if(position.left)
                type=3;     
            return this.filter(function(){
                var pos=$(this).position();
                var ok=true;
                switch(type)
                {
                    case 1:
                        ok=pos.top==position.top&&pos.left==position.left;    
                    break;
                    case 2:
                        ok=pos.top==position.top;
                    break;
                    case 3:
                        ok=pos.left==position.left;
                    break;
                }
                return ok;
            });          
        }
    })
})(jQuery);

Open in new window

This script returns the name of the div with determinate "top" and "left" positions, and work well.
But I think the output goes to a array, and I opened this question because I need to put in a normal variable the first value of the array.
In this case, in practice, in the end I just want the result "q1", because "q1" have the positions top 150px and left 50px.

~JC
0
 
LVL 3

Accepted Solution

by:
Pedro Chagas earned 0 total points
ID: 38807945
The solution is this one
var somevariable = $(e).attr('id');

Open in new window


Thank you.
JC
0
 
LVL 35

Expert Comment

by:YZlat
ID: 38816225
that's because your array was an array of objects. Our solutions are not wrong, you did get an object into your variable, you just need to retrieve "id" property of your object
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 38816328
Hi, After studying could see that, and that is why split the points.
If you feel that should reopen the issue, for me, all right.
0
 
LVL 3

Author Closing Comment

by:Pedro Chagas
ID: 38823874
I tried and could solve alone.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question