Home >
This came in as a question today and I thought it would make a great blog entry. (I tend to use questions as blog fodder on my other blog as well. So please, send in your questions!) Matthew asks:
I've got a set of items here, some P tags some DIV tags. Some use classes named ray_Something, and some use notray_Something. Given this set, we need the selector to find any item using a class that begins with ray_. I've got the jQuery code on top, but no selector just yet. Those of you who know jQuery wll can recognize the mistake Matthew made in his selector: $('.ray_*') The wildcards only (at least as far as I know now) only apply to matches based on attributes. So while .X works as a nice shortcut for the class, it won't work with the wildcard.
But don't forget - .X means match any item using the class X. Class is an attribute as well. A quick rewrite of his selector that works is: $("*[class^=ray]").hide()
The * will match any html, and the [class^=ray] will further filter it down to items with a class that begins with ray. The .hide() was just may way to test the functionality. Here is the complete code block for my working demo.
As a last note - it sure would be nice to have a way to test selectors quicker. I'm working on something in this area now and hope to have something to share next week.
I began by creating a simple page with various items making use of classes that matched what Matthew wanted to find.I am having a hard time trying to use wildcards in my jquery as selectors. For example get all classes that begin with "ray_" so ray_green, ray_blue, ray_red. I tried $('.ray_*'), but that returns 0 items.
<html>
<head>
<script src="jquery/jquery.js"></script>
<script>
$(document).ready(function() {
$("#testBtn").click(function() {
})
})
</script>
</head>
<body>
<p>
<button id="testBtn">Test</button>
</p>
<p class="ray_cool">
ray cool class
</p>
<p class="notray_cool">
notray cool class
</p>
<p class="ray_cool">
ray cool class
</p>
<div class="ray_hot">
ray hot class
</div>
<div class="notray_hot">
notray hot class
</div>
</body>
</html>
<html>
<head>
<script src="jquery/jquery.js"></script>
<script>
$(document).ready(function() {
$("#testBtn").click(function() {
$("*[class^=ray]").hide()
})
})
</script>
</head>
<body>
<p>
<button id="testBtn">Test</button>
</p>
<p class="ray_cool">
ray cool class
</p>
<p class="notray_cool">
notray cool class
</p>
<p class="ray_cool">
ray cool class
</p>
<div class="ray_hot">
ray hot class
</div>
<div class="notray_hot">
notray hot class
</div>
</body>
</html>
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
You actually dont even need the *. You can just use $("[class^=ray]").
Wow, didn't know that. Thanks for sharing it.
For situations that are not covered by selectors you can also use filter() and pass it a function...used to filter out elements that do not match the specified function. This is the next solution when a combination of selectors and the find() or filter() will not do. Essentially, you can create your own test.
http://docs.jquery.com/Traversing/filter#fn
cody
This was very useful. I had been struggling to find some code which explains how wildcard search works, this example just made is so easy to understand.
Thanks
Mir
Erm... this may not be an option for Matthew but why doesn't he just use separate class names instead? E.g. class="ray cool", class="notray cool", class="ray hot" and class="notray hot". They can then be used in CSS selectors like this: p.ray.hot{} or p.notray.hot{} etc and in jQuery with $('.ray, .hot') or $('.notray, .hot') Just a thought...
Is it possible to have a demo ?
I don't have one online, but you could just cut and paste the code above.