jQuery set div width to closest variable like snapTo
<p>I'm working on project where I want to modified <strong>#screen</strong> width to closest width of other (div.snapcord)</p>

<p>My DOM is something like this...</p>

<p>HTML :</p>

<pre><code>&lt;div id="iphone3" class="snapcord"&gt;&lt;/div&gt;
&lt;div id="iphone4" class="snapcord"&gt;&lt;/div&gt;
&lt;div id="ipad" class="snapcord"&gt;&lt;/div&gt;

&lt;div id="screen"&gt;&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>#iphone3 { width: 320px }
#iphone4 { width: 480px }
#ipad { width: 768px }
</code></pre>

<p><strong>#screen</strong> has dynamic width anything between 300px to 780px. I want <strong>#screen</strong> width <strong>snapTo</strong> closest width of other (div.snapcord) with <strong>snapTolerance of 5px</strong>;</p>

<p>Say, </p>

<p><strong>#screen</strong> width is <strong>315px</strong> OR <strong>325px</strong> then I want to modify it to <strong>320px</strong></p>

<p><strong>#screen</strong> width is <strong>475px</strong> OR <strong>485px</strong> then I want to modify it to <strong>480px</strong></p>

<p><strong>#screen</strong> width is <strong>763px</strong> OR <strong>773px</strong> then I want to modify it to <strong>768px</strong> (<strong>snapTolerance of 5px</strong> only )</p>

<p>Else, leave <strong>#screen</strong> width to its original value.</p>

<p>I'm learning jQuery &amp; have managed to get width of each div.snapcord using following snippet.</p>

<pre><code>$('.snapcord').each(function() {
   var getWidth = $(this).width();
   alert(getWidth);
});
</code></pre>

<p>But I'm not clear about how to move further.. </p>

<p>Here is <a href="http://jsfiddle.net/LNZjQ/1/" rel="nofollow">Fiddle</a> </p>

<p>Any help would be highly appreciated.</p>
