Getting dots for classes
<p>I have a span with id and classes like this:</p>

<pre><code>&lt;span id="foobar" class="foo bar baz"&gt;&lt;/span&gt;
</code></pre>

<p>I would like to get the id and classes and put them in Jquery object:</p>

<pre><code>var sd2 = $('span').attr('id');
var sd3 = $('span').attr('class');


$('span').text('#' + sd2 + '.' + sd3);

$('span').text(function (i, text) {
    return text.replace(/ /g, '');
});
</code></pre>

<p>This is a good start but the problem is the output is this:</p>

<pre><code>#foobar.foobarbaz
</code></pre>

<p>Jquery object will give "undefined" becuase I need dots like so:</p>

<pre><code> #foobar.foo.bar.baz
</code></pre>

<p>How do I get those dots in there?</p>

<p><a href="http://jsfiddle.net/8JWhr/1/" rel="nofollow">Example at JsFiddle</a></p>
