I have a bunch of LIs that get moved around the page. I want to be able to set a variable to whatever LI has a css property "left: 0px" (there will only be one).
I can't seem to figure out how to narrow down a list this way, every method I find just wants to add that property.
So to put it in a more verbose way:
var my_var = $('ul#slider li') with the property "left: 0px"
and it should return something like:
<li><img src="image1.jpg"></li>
Thanks!
related issue here: check if any element contains certain css style using filter is the best bet.
or you may want to take the "classes" approach and see here: jQuery: check if element has CSS attribute
Try using css class.
Here's an example:
CSS :
.left {left: 50px;}
HTML:
<ul>
<li id="li1">Left = 0px</li>
<li id="li2" class="left">Left = 50px</li>
</ul>
to get the li1 (the one without left class / styling):
var my_var = $('li:not([left])');
Good luck!
You can do this easily with jQuery, without needing to mess with assigning special classes. You will want to use jQuery's .filter( function(index) ) method:
var my_element = $('ul#slider li').filter(function() {
return $(this).css('left', '0px').length > 0;
});
jQuery's filter method accepts, among other things, a function that can return a truthy or falsey value that controls whether to filter items in the set. So we can use the filter method to check each li's css with jQuery's css() method, returning true if it fits your criteria.
leftcss property to 0px?