Question

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.

Answer 1

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')");