Question

Using jQuery, how can I say ‘Does a child of #parent have the stlye=”width”‘.

I know the beginning…

jQuery('#parent').children();

But I dont know how to write has style ‘width’.

EDIT

In the html the div says style=”width=xxx”. I want to find the first occurrence of that width and add a margin: 0 auto; to that div. Its for centering videos.

Some of the divs that say style=”width” are 3 levels nested from the top. That still should work with .children() right?

For some reason, i cant get any of the below codes to work…

Answer 1

You need to use an “attribute contains” selector:

Description: Selects elements that have the specified attribute with a value containing the a given substring.

jQuery('#parent [style*="width:"]')

That will give you the children of #parent that have the string width: in their style attribute.

Example: http://jsfiddle.net/ambiguous/vpdGa/1/

If you need to worry about border-width and similar CSS properties, then you could add your regular expression selector:

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ? 
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}

And then search thusly:

jQuery('#parent :regex(style,(^|\\s)width:)')

Don’t forget the extra backslash to get past the string literal’s backslash interpretation.

And an example of this approach: http://jsfiddle.net/ambiguous/vpdGa/4/