Add Selectable Indentation to HTML dynamically.

This code takes a class of tab-4 and adds four tabs to the element with the class.

by Brian Dillingham

HTML

<p class="tab-1">var indentElements = $('[class*="tab-"]');</p>
<p class="tab-1">$.each(indentElements, function (index) {</p>
<p class="tab-2">var indentAmount = parseInt(this.className.split('-')[1]);</p>
<p class="tab-2">var indentation = new Array(indentAmount + 1).join('&nbsp;&nbsp;&nbsp;&nbsp;');</p>
<p class="tab-2">this.innerHTML = indentation + this.innerHTML</p>
<p class="tab-1">});</p>

<hr>

<h3>Infinite Tabs :)</h3>
<span class="tab-1">Tab 1</span>
<span class="tab-2">Tab 2</span>
<span class="tab-3">Tab 3</span>
<span class="tab-4">Tab 4</span>
<span class="tab-5">Tab 5</span>
<span class="tab-6">Tab 6</span>
<span class="tab-7">Tab 7</span>
<span class="tab-8">Tab 8</span>
<span class="tab-9">Tab 9</span>
<span class="tab-10">Tab 10</span>
<span class="tab-11">Tab 11</span>
<span class="tab-12">Tab 12</span>
<span class="tab-13">Tab 13</span>
<span class="tab-14">Tab 14</span>
<span class="tab-15">Tab 15</span>
<span class="tab-16">Tab 16</span>
<span class="tab-17">Tab 17</span>
<span class="tab-18">Tab 18</span>
<span class="tab-19">Tab 19</span>
<span class="tab-20">Tab 20</span>

CSS

body {
    background: #333;
    color: #ccc;
}

p {
    counter-increment: code;
    white-space: nowrap;
}

p:before {
    
    content: counter(code) "";
}

span {
    display: block;
    white-space: nowrap;
    border-bottom: 1px solid #222;
}

JavaScript

var indentElements = $('[class*="tab-"]');

$.each(indentElements, function (index) {
    var indentAmount = parseInt(this.className.split('-')[1]);
    var indentation = new Array(indentAmount + 1).join('&nbsp;&nbsp;&nbsp;&nbsp;');
    this.innerHTML = indentation + this.innerHTML
});