What's the fastest way possible to get a string like "fade" from the classes in the element below?
<div class="MyElement fx-fade"> ... </div>
-
What would this help you do? I'm unsure what you mean.Tom– Tom2010-07-08 14:41:04 +00:00Commented Jul 8, 2010 at 14:41
Add a comment
|
7 Answers
If you wanted to look for something that ended in 'fade' you would use:
$("*[class$='fade']")
And for elements with a class that started with 'fade' you would use:
$("*[class^='fade']")
And to get elements that contain 'fade' you would use (this would be quicker than going through the class names string)
$("*[class*='fade']")
The * gets all elements so you could replace this with the element you wanted.
If you want elements that has a classname that starts with fx- you would do:
var classname = "";
var elArray = $("*[class*='fx-']");
for (var a = 0; a < elArray.length; a++) {
// fade
classname = elArray[a].split("-")[1];
}
The array used in the for loop would have all the elements with the classnames like 'fx-'.
Rather than than the for loop checking the elements for the correct class name.
More information at jquery.com
var classes = $('.MyElement').attr('class').split(' ');
for (var i = 0; i < classes.length; i++) {
var matches = /^fx\-(.+)/.exec(classes[i]);
if (matches != null) {
var fxclass = matches[1];
}
}
Comments
The question title and the question do not exactly match (title asks for prefix, question asks for suffix/partial)
1. Select elements by class-prefix
Combine following two jQuery/CSS selectors:
$( "[class^='fx-'],[class*=' fx-']" )
[class^='fx-']Starts-With-Selector
Find elements where the first letters of the entire class attribute starts with "fx-"
e.g.<a class="fx-fade MyElement anything">[class*=' fx-']Contains-Selector
Find elements where a space + "fx-" is found anywhere inside the class attribute
e.g.<a class="MyElement fx-fade anything">
This selector makes sure, that you do not get false positives such as <a class="MyElement sfx-none">
2. Select elements by class-suffix
Almost identical to the prefix selector:
$( "[class$='-fade'],[class*='-fade ']" )
[class$='-fade']End-With-Selector
Find elements where the last letters of the entire class attribute are with "-fade"
e.g.<a class="MyElement anything fx-fade">[class*='-fade ']Contains-Selector
Find elements where a "-fade" + space is found anywhere inside the class attribute
e.g.<a class="anything fx-fade MyElement">
This selector makes sure, that you do not get false positives such as <a class="MyElement sfx-none">
3. Select elements by class-substring
When you need to find a substring that is neither the start nor the end of a class name, use the selector suggested in the other answers:
$( "[class*='fade']" )
[class*='fade']Contains-Selector
Find elements where "fade" is found anywhere inside the class attribute
e.g.<a class="fx-fade-out">
Warning: This also finds "no-fade" or "faded". Use the Contains-Selector with care!
Comments
Check out JQuery selector regular expressions. It might be exactly what you need! :)
2 Comments
Rebecca Chernoff
I think you did the same thing I did. I misread the question, answered it, and then deleted my answer. The OP isn't asking how to filter elements given the partial match. I think given the element, the OP is asking how to extract part of the attribute.
Sai
Ah! In that case, I apologize for the confusion.
I'd probably go with something like:
//Split class list into individual classes:
var classes = $(".MyElement").attr("class").split(" ");
var fxType;
//Loop through them:
for (var i = 0, max = classes.elngth; i < max; i++) {
var class = classes[i].split("-");
//Check if the current one is prefixed with 'fx':
if (class[0] == "fx") {
//It is an FX - do whatever you want with it, the type of FX is stored in class[1], ie:
fxType = class[1];
}
}
2 Comments
Peter Kruithof
Careful,
class is a reserved word in javascript and will cause an error in some browsers.
Jake
Oops, had a feeling it might be. Thanks!
This simple snippet we use in our sites:
/**
* Script to load a popup container for share buttons
*
* Possible usage for Facebook, Twitter and Google:
*
* <a class="share-buttons-fb" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_the_permalink(); ?>&title=<?php the_title(); ?>">Facebook</a>
* <a class="share-buttons-twitter" href="https://twitter.com/intent/tweet?text=<?php the_title(); ?>: <?php echo get_the_permalink(); ?>">Twitter</a>
* <a class="share-buttons-google" href="http://plus.google.com/share?url=<?php echo get_the_permalink(); ?>">Google+</a>
*/
jQuery(document).ready(function ($) {
// Whenever an anchor with the class with share-button in it is clicked
$("a[class*='share-button']").click(function () {
// Variables to set the size of the popup container
var windowWidth = 500;
var windowHeight = 255;
// Variables to set the position of the popup container
var positionWindowLeft = (screen.width / 2) - (windowWidth / 2);
var positionWindowTop = (screen.height / 3) - (windowHeight / 3);
// Create new windows with the opening url of the href attribute of the anchor and the above variables
var popupWindow = window.open($(this).prop('href'), '', 'scrollbars=no,menubar=no,status=no,titlebar=no,toolbar=nolocation=no,menubar=no,resizable=noe,height=' + windowHeight + ',width=' + windowWidth + ',top=' + positionWindowTop + ', left=' + positionWindowLeft);
// If the default windows is focused
if (window.focus) {
// Change the focus to the the popup window
popupWindow.focus();
}
return false;
});
});