Find element by css value jQuery

Question

I have a div that changes a lot and I need to do find a child element that has the same value and store its id.

Goal: Find span with the same left attr as div.stuff, return the span id (In this case the id returned in the alert should be 3)

HTML

<div class="stuff" style="left:100px">
    <span id="1" style="left:0"></span>
    <span id="2" style="left:50px"></span>
    <span id="3" style="left:100px"></span>
    <span id="4" style="left:150px"></span>
</div>

jQuery

var stuff = $('.stuff').css('left');
var id = $('.stuff').find('span[left=100px]').attr('id');

alert(id);

Fiddle http://jsfiddle.net/56TWg/

Answer 1

You can use filter() here:

var id = $('.stuff span').filter(function () { 
    return $(this).css('left') == '100px' 
}).attr('id');

Updated Fiddle

Answer 2

Here's a snippet that achieves that:

var leftValue = $('.stuff').css('left');
alert(leftValue);

var id = $('.stuff').find('span[style*="left:' + leftValue + '"]').attr('id');

alert(id);

fiddle: http://jsfiddle.net/d8SHd/