tag:www.insideria.com,2009://34/tag:www.insideria.com,2009://34.35870- 2009-11-16T15:06:55Z Comments for jQuery Wild Card Example (http://www.insideria.com/2009/04/jquery-wild-card-example.html) Movable Type 4.21-en tag:www.insideria.com,2009://34.35870 2009-04-15T02:23:14Z 2009-04-15T02:56:16Z jQuery Wild Card Example Quick example of a wildcard selector. Raymond Camden http://www.coldfusionjedi.com other blog as well. So please, send in your questions!) Matthew asks:

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.

I began by creating a simple page with various items making use of classes that matched what Matthew wanted to find. 

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

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. 

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

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.]]> tag:www.insideria.com,2009://34.35870-comment:2057566 Comment from anthony on 2009-04-15 anthony http://www.fojasaur.us You actually dont even need the *. You can just use $("[class^=ray]").

]]> 2009-04-15T13:52:22Z tag:www.insideria.com,2009://34.35870-comment:2057569 Comment from Raymond Camden on 2009-04-15 Raymond Camden http://www.coldfusionjedi.com Wow, didn't know that. Thanks for sharing it.

]]> 2009-04-15T15:26:09Z tag:www.insideria.com,2009://34.35870-comment:2057582 Comment from cody lindley on 2009-04-15 cody lindley http://www.codylindley.com 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

]]> 2009-04-15T19:11:20Z tag:www.insideria.com,2009://34.35870-comment:2058665 Comment from Mir on 2009-04-30 Mir 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

]]> 2009-04-30T19:56:12Z tag:www.insideria.com,2009://34.35870-comment:2065829 Comment from mikrogroove on 2009-06-09 mikrogroove 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...

]]> 2009-06-09T15:56:03Z tag:www.insideria.com,2009://34.35870-comment:2068501 Comment from Bonus Chilipoker on 2009-07-17 Bonus Chilipoker http://www.bonus-chilipoker.com/ Is it possible to have a demo ?

]]> 2009-07-18T01:18:23Z tag:www.insideria.com,2009://34.35870-comment:2068503 Comment from Raymond Camden on 2009-07-17 Raymond Camden http://www.coldfusionjedi.com I don't have one online, but you could just cut and paste the code above.

]]> 2009-07-18T03:09:53Z