How to find an element by style attribute?

Question

I am having trouble retrieving elements by style attribute. I have a ul with several li elements and I would like to find the one with the style atribute having a value display:list-item. I have tried to approach this in several ways, including the following, but I keep getting an empty object. I have no problem with a title attribute. Not sure what I am doing wrong.

$('li[style*=display:list-item]')

HTML:

<ul class="bjqs" style="height: 200px; width: 100%;">
    <li class="bjqs-slide" style="height: 200px; width: 100%; display: list-item;">

Answer 1

Your selector is white-space sensitive, given that you have white-space in the attribute, you'll need that in your selector as well:

$('li[style*="display: list-item"]')

The easiest way, which reduces the problems of precisely matching a string, if you're filtering elements according to a particular CSS property, is to use filter():

$('li').filter(function(){
    return $(this).css('display') === 'list-item';
});

References:

• filter().

Answer 2

Two problems:

1. In your HTML there is a space between "display:" and "list-item".
2. Your selector needs to be wrapped with quotations "".

Simply change your selector to include this space and wrap it in quotes:

$('li[style*="display: list-item"]')

JSFiddle demo.