jQuery: Use variables within selector
<p>Mind you, I'm not a jQuery guru and just still learning.</p>

<p>I have this looong function:</p>

<p><code>$('.client1 &gt; *:first-of-type, .client2 &gt; *:first-of-type, .client3 &gt; *:first-of-type, .client4 &gt; *:first-of-type, .client5 &gt; *:first-of-type').append('&lt;span class="jsi"/&gt;');</code></p>

<p>It does work, yes, but I know it's not efficient and not easily scalable because every time I have to add a new 'client' I have to add it to the selector list.</p>

<p>So I know I could use (a) variable(s) for the <code>&gt; *:first-of-type</code> part, and maybe an "array" (I don't know if I'm saying that right) for the <code>.clientX</code> part.</p>

<p>This is honestly a bit over my head.</p>

<p>This is what I've tried but of course doesn't work:</p>

<pre><code>var fot = "&gt; *:first-of-type";
$('.client1' + fot, '.client2' + fot, '.client3' + fot, '.client4' + fot, '.client5' + fot).append('&lt;span class="jsi"/&gt;');
</code></pre>

<p>What happens is not only I would like to not have to repeat myself but be able to scale this more efficiently as new clients need to be added to the function.</p>

<p>Any help on this is greatly appreciated.</p>
