[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 258
  • Last Modified:

Get the first value of array - Javascript or Jquery

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
Pedro Chagas
Asked:
Pedro Chagas
3 Solutions
 
YZlatCommented:
you can get first value of an array using

$(myarray).first()

Open in new window

0
 
Russ SuterCommented:
It's as simple as:

var myVariable = myArray[0];

Or is there something else to this question that I'm missing?
0
 
Pedro ChagasWebmasterAuthor Commented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
nap0leonCommented:
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
 
Pedro ChagasWebmasterAuthor Commented:
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
 
Pedro ChagasWebmasterAuthor Commented:
The solution is this one
var somevariable = $(e).attr('id');

Open in new window


Thank you.
JC
0
 
YZlatCommented:
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
 
Pedro ChagasWebmasterAuthor Commented:
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
 
Pedro ChagasWebmasterAuthor Commented:
I tried and could solve alone.
0

Featured Post

[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now