asked on

Jquery or Javascript - Get the name of the DIV looking for element properties

Hi E's, I have this code that show five boxes. Every one with different positions:

 <!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" />
<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>
</body>
</html>

Open in new window

I need to identify the name of the div that have position left: ??? and top: ???.
In practice, for example, how I identify in my code the div that have this position: "left: 250px; top: 550px;". The return in this case is "q3".
The solution can be in jQuery (priority) or in Javascript.

The best regards, JC

YZlat

try something like

var div_name=$('div[left=250px]').id;

Open in new window

var div_name=$('div[left=250px && top=550px]').id;

Open in new window

Pedro Chagas

ASKER

Hi, thanks for the answer. I try your code, but not work.
This is the new code:

 <!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" />
<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>

<script>
var div_name = $('div[left=250px && top=550px]').id;
alert(div_name);
</script>
</body>
</html>

Open in new window

What is wrong?

~JC

Ludwig Diehl

try this:

    var elements=getElementsByPos({top:150,tag:'div'});
    function getElementsByPos(obj)
    {
        var selector='';
        var elements=[];
        
        if(obj.tag)
            selector=obj.tag;
        if(obj.className)
            selector+="."+obj.className;            
        
        $(selector).each(function(i,e){
            $this=$(this);
            var position=$this.position();
            if(obj.left&&obj.top)
            {
                if(position.left==obj.left&&position.top==obj.top)
                    elements.push($this);
            }
            else if(obj.left)
            {
                if(position.left==obj.left)
                    elements.push($this);
            }
            else if(obj.top)
            {
                if(position.top==obj.top)
                    elements.push($this); 
            }
        });
        return elements;    
    }

Open in new window

YZlat

wrong question

Pedro Chagas

ASKER

wrong question?

Ludwig Diehl

You could always use:

function getElementByPosition(left,top)
{
var element = document.elementFromPoint(left,top);
return element;
}

Pedro Chagas

ASKER

Hi @ludwigDiehl, I need identify the "div" that have the position left and top, not just top, and in your solution, I think, just give me the "div's" that have position 'top' and not 'left' position. The solution have to give me the div that have in simultaneous 'top' and 'left'.

~JC

Pedro Chagas

ASKER

Hi again @ludwigDiehl.
I use your last code in this way: (My knowledge in js are very poor)

 <!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" />
<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>

<script>
function getElementByPosition(left,top)
{
 var element = document.elementFromPoint(left,top);
 return element;
}
getElementByPosition("150","150");
alert(element);

</script>
</body>
</html>

Open in new window

What is wrong in my update?

~JC

Ludwig Diehl

My first solution actually includes both positions:

This is my example:

var elements=getElementsByPos({top:150,tag:'div'});

Open in new window

You could use it this way:

var elements=getElementsByPos({left:50,top:150,tag:'div'});

Open in new window

I was working on another way:

var elements=getElementsByPos('div',{left:50,top:150});
function getElementsByPos(selector,position)
    {
        var type;
        if(position.top&&position.left)
            type=1;
        else if(position.top)
            type=2;
        else if(position.left)
            type=3;     
        return $(selector).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;
        });
    };

Open in new window

Pedro Chagas

ASKER

Ok, but how I see the var elements, I try put in "alert" but the output is "object Object"?

~JC

Ludwig Diehl

try this:

<div id="results"></div>
<script type="text/javascript">
$results=$('#results');
   $.each(elements,function(i,e){
        $results.append($(e).attr('id')+'<br/>');
   });
</script>

Open in new window

Pedro Chagas

ASKER

Work, thanks.
I do not want to abuse the goodwill, but I need a little help for finish.
I have certain that don't have divs with the same left and top, all elements have different positions, so the result is always 1.
In this case if I want put the result in a normal variable, how I do?

~JC

ASKER CERTIFIED SOLUTION

Ludwig Diehl

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Pedro Chagas

ASKER

Hi, I don't understand how I put the first result in a normal variable. Please show me.

~JC

Ludwig Diehl

What do you mean by "normal variable"?.

Pedro Chagas

ASKER

Hi. Normal variable is the variable with one value, like var somevar = "a value".
Your solution returns an array, and I want to put a variable the first result of this array, this is the reason for saying normal variable.
After searching I found this solution: "var somevariable = $(e).attr('id');". This solution works. If you were as you were doing?

~JC

Ludwig Diehl

Yeah of course you can do that. Just remember that in that case it returns a single value as you are passing a dom object as a selector $(element) or in case only one element matches.
However if u use for instance

va somevariable=$('div').attr('id');

Open in new window

It may give you no result as there might be several divs on your page

$('selector') will return a single value as it is indeed an array returned thats why you can loop through it using each