Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Get the first value of array - Javascript or Jquery

Posted on 2013-01-22
9
Medium Priority
?
253 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 1000 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 1000 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

824 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