Is it possible to get a class that contains some name? I have many classes with repeated part of the name, like: first_class, second_class, third_class etc.
I want to do something like:
$('selector').getChildren('.*_class')
is it possible?
MooTools uses the CSS selectors in the W3C specs. So you could use [class*="bar"] like this: $('myDiv').getElements('[class*="_class"]').
Just keep in mind if the search string is too generic you might also target other elements. Adding a common class could be a better idea, or even try to match some DOM pattern in the relations between elements.
jsFiddle: http://jsfiddle.net/h49s551s/
One solution would be to add a common class name to each item, i.e.
<div class = "first_class common_classname">foo</div>
then call your objects by using the common class name. Another solution is to call them all at once
$('selector').getChildren('first_class, second_class, thirdclass')
Related
So, I've read recently some posts about HTML5 best practices and all of them have the following practice:
"Use id attribute instead of name attribute"
Is that right? I mean, how am I going to handle forms in PHP, for example, if not by inputs' name attribute?
Look here for reference:
Difference between id and name attributes in HTML
https://teamtreehouse.com/community/what-is-the-difference-between-id-and-name-attributes-in-form-elements
Names can be used for more elements, while ids are unique. This helps with styling multiple elements without repeating your css code.
Long story short, id is not meant for naming form elements.
You use id to make it easier for CSS or JavaScript to handle that one particular element with the unique id.
Whether you're using CSS or JavaScript/jQuery with your forms, an ID is handy for most inputs/elements because you can reference them like easily. Remember, ID's are unique:
<div id="example1"></div>
If you have an element like I mentioned above, you can always call it later by doing this:
var x = document.getElementById("example1").id;
along with many other ways.
Names can sometimes be tied to a variety of elements on the page, whereas there will always only by one item with that particular ID.
Should I be using class names in HTML page that describe it completely, eg. navbar-static-8 to describe a fixed navbar containing 8 items?
Or should I be wrapping the metadata into separate attributes e.g. type="static" items="8".
I want such names to be parsed in javascript.
Cleaner would be to use data attributes like:
<div data-type="static" data-items="8"></div>
John Resig wrote a nice article about this http://ejohn.org/blog/html-5-data-attributes/
But if "static" refers to something you want to use for the design of the item, you should use classes since these are designed to be used in CSS. The data attributes are more used in Javascript as meta data about the object.
yes you can use navbar-static-8 type of name of class , and you can 'type="static" items="8"' your custom attribute but test on all browser (specially Intenet Explorer)
You should use descriptive class names for a intuitive css use, like "navbar navbar-static" and use the html5 data for js, like data-navitems="5"
Make use of cascading, use two css classes, navbar to describe general nabvars properties, and navbar-static to describe styles only for the static navbars.
Trying to learn html/css. I've been looking at the html & css files of a couple different websites that have something along the line of:
<span class="mytest anothertest">some text goes here</span>
I understand the "mytest" part but what does "anothertest" do? There's no reference to that anywhere in their css or html files.
anothertest is just another class like mytest. You can apply more than one to an element.
There are several possible reasons for the presence of a class name in a class attribute value. Using the class in page stylesheets is probably most widely known, but not the only one:
The class name can be used in JavaScript in order to process a set of elements conveniently. (Using document.getElementsByClass is one way to achieve this; another way is to use jQuery; and you could even hand-code it rather simply.)
Designated class names are used in some metadata systems, such as microformats. Some search engines recognize such names and use them to provide semantic searching (though this approach probably loses to microdata, which uses different attributes).
A class name can be used in a user style sheet, e.g. by a developer who wishes to do some testing. This could well be the case if the class name is literally “anothertest.”
The name might be there to allow future development, e.g. so that elements of a class will be or may be styled in some future version. The designers might have ideas on styling but they haven’t decided on it—they just want it to be easy when they are ready.
It could be just a holdover. It was a class that had some use, but things changed. There was really no particular reason to remove it.
This is a very good question. It involved the difference between id and class.
ID
An ID placed on an element, is a unique identifier for that element. An element may only have one ID, and only one of the same ID may exist on a page. So for instance, the following examples are not possible.
<a id="someid anotherid">Multiple IDs - Wrong</a>
<a id="someid"><span id="someid">Same ID twice - Wrong</span></a>
Class
A class name however, is the exact opposite. An element may have several class names, and the same class name may appear multiple times on a page. Like so:
<a class="someclass anotherclass">Multiple Classes - Correct</a>
<a class="someclass"><span class="someclass">Same Class twice - correct</span></a>
In short, the syntax displayed in the question is simply having 2 class names on one element, which is perfectly acceptable.
Class name are also used to easily select elements in the page with JavaScript. You can use the getElementsByClassName method to access them or using your favorite CSS selector library (ex.: Sizzle) if you need compatibility for older browser.
So I just need a reminder,
Every element can only have 1 id, but multiple classes are possible,
But what if I would like to have 2 ways to uniquely identify an object without classes?
I cant remember the name of it, something like Tagname, that can be used in addition to ID.
And how would you identify this object in jQuery?
For classes it is: $('.class'), for ID's it is $('#id') but what about this thing that I am vaguely describing?
Taylor
I cant remember the name of it,
something like Tagname, that can be
used in addition to ID.
You might be thinking of GetElementsByTagName() but that will return a collection:
https://developer.mozilla.org/en/DOM/element.getElementsByTagName.
You can use arbitrary attributes in any modern browser (jQuery does this behind the scenes). So you can put whatever attribute you want on an element and locate it using a jQuery attribute selector (as #Dave pointed out in his answer).
<div myAttribute="foo"></div>
<script>
var element = $("div[myAttribute='foo']"); // matches all divs with "myAttribute" set
</script>
There are many options: http://api.jquery.com/category/selectors/
Just use the "name" attribute:
<div id="something" name="something"></div>
Then reference it by the id like usual, or by the name like this:
$('[name="something"]')
Info on on this selector here.
Is it bad thing if I add more than one class for one object. Let's say:
text
Don't ask me why, I just need it.
Thanks.
You can use multiple class names (a perfectly normal thing to do), but are only allowed one class attribute on your HTML element.
Do this instead:
text
Following on from RedFilters' answer you could of course extend your class selectors by using the angular ng-class attribute as follows:
text
The resulting html would then be:
text
Might come in useful to get around a tslint "line too long" error :-)
There's no need for two class statements, simply:
text
Now, in order to handle this in CSS you need to do this:
.paren.default{
}
...Whithout spaces between the two class selectors.
Cheers!