Solved

Get the first value of array - Javascript or Jquery

Posted on 2013-01-22
9
234 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 18

Expert Comment

by:nap0leon
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 3

Author Comment

by:Pedro Chagas
Comment Utility
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
Comment Utility
The solution is this one
var somevariable = $(e).attr('id');

Open in new window


Thank you.
JC
0
 
LVL 35

Expert Comment

by:YZlat
Comment Utility
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
Comment Utility
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
Comment Utility
I tried and could solve alone.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

728 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now