CODEWITHSUNDEEP
jquery
Darkry
Darkry

Reputation: 590

Select HTML element by CSS property value in style attribute

I have HTML like this:

…
<div style="top: 252px; left: 54px;"></div> 
<div style="top: 252px; left: 162px;"></div> 
<div style="top: 288px; left: 108px;"></div>
…

I have a JavaScript object literal like this:

var pos = { top: 252, left: 54 };

I want to select the element with the position that the object literal indicates. Positions are unique, so only one element will be selected.

Thank you for answers.

Upvotes: 8

Views: 4912

Answers (7)

zatatatata
zatatatata

Reputation: 4821

Use

function findElement (top, left) {
    return target = $('div').filter(function() {
        var div = $(this);
        if (parseInt(div.css('top')) == top && parseInt(div.css('left')) == left )
            return true;
        return false;
    });
}

See the jsfiddle sample

Upvotes: 1

knut
knut

Reputation: 4745

You can do it like this with the jQuery JavaScript library out of the box:

var pos = { top: 252, left: 54 };
$('div[style*="top: ' + pos.top + 'px"][style*="left: ' + pos.left + 'px"]');

You need to make sure to use white space consistently. If you type:

<div style="top:252px; left:54px;"></div>

the proposed selector will not work.

You can also add other CSS properties to the style attribute by using my example code, and the order would not matter. Here is an example:

<div style="left: 54px; background: gray; top: 252px;"></div>

Upvotes: 3

Litek
Litek

Reputation: 4888

you can select element by contents of style attribute (pay attention to spaces):

$('div[style*="top: 252px; left: 54px"]').css("color","red")

Example.

But like BonyT said - you should rather put the values into an id or class.

Upvotes: 1

BonyT
BonyT

Reputation: 10940

All I can say is don't do this!

If you can add a unique position style to a div, you can equally easily add an identifier at the same time.

Use this identifier to select the element in javascript, not the css positioning.

Upvotes: 5

Brian Scott
Brian Scott

Reputation: 9381

Credit goes to the original poster here;

jQuery find by inline css attribute

The function is 'styleEquals' and can be implemented as;

jQuery.extend(jQuery.expr[':'], {
    styleEquals: function(a, i, m){
        var styles = $(a).attr("style").split(" ")
        var found = false;
        for (var i = 0; i < styles.length; i++) {
                if (styles[i]===m[3]) {
                        found = true;
                        break;
                }
        }
        return found;
    }
});

You can then search elements by their style attribute values using your new jquery extensions function such as;

$("div:styleEquals('top=252px'):styleEquals('left:54px')");

Upvotes: 5

Dumitru Ceban
Dumitru Ceban

Reputation: 640

Give them a class or id and select them using class/id, it will be much faster. Otherwise you'll need to find them all and filter by css values.

Upvotes: 1

Raptor
Raptor

Reputation: 54278

When you generate these DIV, assign them with unique id attribute. Then you can retrieve the DIV object with the id attribute.

Upvotes: 1

Related Questions