Satisfy that selector!

20 Aug 2009

Satisfy is a development-only ~~jQuery plugin~~* that you can use to quickly generate HTML for testing/debugging. The idea is that you provide a CSS selector and then the plugin will “satisfy” it by generating an HTML structure in accordance with that selector.

* – UPDATE: This is no longer just a jQuery plugin – as of version 0.2 Satisfy has no dependencies. See the comments for more info.

For example:

jQuery('div a').satisfy();

… would return the following HTML structure:

<div>
    <a></a>
</div>

A more snazzy example:

jQuery('ul li:5 span[innerHTML="link"]').satisfy();

… which would return the following:

<ul>
    <li><span>link</span></li>
    <li><span>link</span></li>
    <li><span>link</span></li>
    <li><span>link</span></li>
    <li><span>link</span></li>
</ul>

(Note: It ignores combinators (+|~|>) and pseudo-classes (:pseudo). It adds support for numerical pseudo-classes (e.g. “:5”) which you can use to specify how many of a particular element you want.)

More information and source available at Github – “satisfy” @ GitHub

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!

So far there's been 5 Responses to
“Satisfy that selector!”

Paul Irish August 20th, 2009 at 7:16 pm

Yeah this is pretty damn perfect for quickly writing some markup to test on. Thanks man.

David Walsh August 20th, 2009 at 8:20 pm

Awesome work James — this looks very useful. Do you think a non-jQuery-specific version could be in order? This would have a much larger audience if it was coded with vanilla javascript.

Pete August 20th, 2009 at 8:52 pm

I’ve been using something like this for a while (not written for jQuery though). It’s definitely the way to go, sort of a natural partner to querySelectorAll.

My version is slightly influenced by HAML, with divs as a default element type:

createElement( '#container' );
// div id="container" 
 
createElement( 'span.wrapper' );
// span class="wrapper" 
 
createElement( 'img src:path/here/img.png, alt:"this is art"' );
// img src="path/here/img.png" alt="this is art"

And also as branch builder, that returns an object of references:

createBranch(
  '#container',
    '#container-inner',
      [
       'h1 setText: "Hello world"',
       'p @:myPara, setHTML: "Blah"'
      ]	
  );
/*
{
  root: #container,
  div: [#container, #container-inner],
  h1: [h1],
  p: [p],
  myPara: p
}
*/

For complicated structures you can also nest branches without compromising the returned object.

Jonathan Sharp August 21st, 2009 at 6:22 pm

James, that absolutely rocks! Clean implementation too!

James August 23rd, 2009 at 9:44 pm

Thanks for the comments! 🙂

@David, the jQuery version was more of a POC – I only really use jQuery so I saw no need for a sans-jQuery version. But, those who ask shall receive 😉 … It now works with no dependencies – if jQuery is available it will still work as a plugin though. Check it out (same repo): http://github.com/jamespadolsey/satisfy/tree/master

@Pete, that’s pretty neat. I think it’d take a bit of getting used to, but at a first glance it looks like a very natural way of creating elements. I’m gonna have to try it out!

Satisfy that selector!

So far there's been 5 Responses to “Satisfy that selector!”

So far there's been 5 Responses to
“Satisfy that selector!”