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/

Felix · Accepted Answer · 2014-02-26 15:52:01Z

5

You can use filter() here:

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

Updated Fiddle

answered Feb 26, 2014 at 15:52

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

A. Wolff Over a year ago

+1 even would be better to filter it using position imho: jsfiddle.net/56TWg/8

Rui · Accepted Answer · 2014-02-26 15:53:18Z

1

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/

answered Feb 26, 2014 at 15:53

Rui

4,9163 gold badges32 silver badges35 bronze badges

2 Comments

James Montagne Over a year ago

Worth noting that this only works if the only thing in the style attribute is exactly this. Even so much as a semicolon at the end and this breaks.

A. Wolff Over a year ago

@Rui still could be: left: 100px

Collectives™ on Stack Overflow

Find element by css value jQuery

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related