Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can jQuery select by CSS rule, not class?

Tags:

A .container can contain many .components, and .components themselves can contain .containers (which in turn can contain .components etc. etc.)

Given code like this:

$(".container .component").each(function(){   $(".container", this).css('border', '1px solid #f00'); }); 

What do I need to add to the line within the braces to select only the nested .containers that have their width in CSS set to auto? I'm sure it's something simple, but I haven't really used jQuery all that much.

like image 755
Adam Hepton Avatar asked Sep 04 '08 14:09

Adam Hepton


People also ask

Can I use CSS selectors in jQuery?

The most basic concept of jQuery is to "select some elements and do something with them." jQuery supports most CSS3 selectors, as well as some non-standard selectors.

How do you select an element that is not a class?

In CSS, to exclude a particular class, we can use the pseudo-class :not selector also known as negation pseudo-class or not selector. This selector is used to set the style to every element that is not the specified by given selector. Since it is used to prevent a specific items from list of selected items.

Is jQuery a selector of a class?

class selector selects all elements with the specific class. The class refers to the class attribute of an HTML element. The class attribute is used to set a particular style for several HTML elements. Note: Do not start a class attribute with a number.


2 Answers

You may want to look into .filter().

Something like:

$('.container .component .container') .filter(function() {return $(this).css('width') == 'auto';}) .css({border: '1px solid #f00'}); 
like image 134
anon Avatar answered Sep 19 '22 15:09

anon


$(".container .component").each(function() {     $(".container", this).each(function() {         if($(this).css('width') == 'auto')         {             $(this).css('border', '1px solid #f00');         }     }); }); 

Similar to the other answer but since components can also have multiple containers, also needs the .each() check in here too for the width.

like image 32
David McLaughlin Avatar answered Sep 19 '22 15:09

David McLaughlin