Solved

Get the first value of array - Javascript or Jquery

Posted on 2013-01-22
9
241 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
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…

773 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