2

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...

1
  • 2
    Do you mean has the width style specified on the element itself or has a width style applied from anywhere, including stylesheets? Jun 25, 2011 at 19:29

5 Answers 5

3

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/

15
  • But that would match min-width, max-width, outline-width and border-*-width, as @Sjoerd says in his comment. Jun 25, 2011 at 19:47
  • This works for me, but how can i add a class to the child who has the width? Jun 25, 2011 at 19:58
  • @Frédéric: Good point, I added an update that patches a regex selector into jQuery so that we can deal with the troublesome properties. Jun 25, 2011 at 19:59
  • @cnotethegr8: You'd add a class the same way you'd add a class to any other jQuery object: $(...).addClass(class_name). Jun 25, 2011 at 20:01
  • @mu, it still won't work if the style attribute begins with width. +1 for the regex selector plugin, however :) Jun 25, 2011 at 20:05
1

Try css():

 var width = $(element).css('width')
0

You can use jquery' attr which gets you if it has widht or not

http://api.jquery.com/attr/

do a length check on the result

it should do it.

0

Use the prop() method, as seen here: http://api.jquery.com/prop/

0
 function checkStyleAttr(elSelector,attr){
    return new RegExp('[^-]'+attr+'[ ]*:').test($(elSelector).attr('style'));
}
1
  • 1
    This will return true for width if the element has min-width or border-width set.
    – Sjoerd
    Jun 25, 2011 at 19:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.