ساخت باکس های رنگی با کمک جی کوئری

سلام به همگی،
چند وقت پیش دنبال راهی بودم تا به تعدادی از عناصر html، رنگهای پس زمینه متفاوتی بدم، به همین خاطر به سراغ جی کوئری رفتم و با چند خط کد مشکلم به سادگی حل شد. در پست آموزشی امروز به این مسأله میپردازیم و در ادامه خواهید دید که چقدر کار با جی کوئری ساده و مفیده.

برای شروع کار، لازمه تا تعدادی المان html به شکل زیر تعریف کنیم:

 HTML:

<ul class="box">
<li><a href="https://alimir.ir"><img alt="دنیای وردپرس و برنامه نویسی" src="wp3.png" title="دنیای وردپرس" /></a></li>
<li><a href="https://alimir.ir"><img alt="دنیای وردپرس و برنامه نویسی" src="wp3.png" title="دنیای وردپرس" /></a></li>
<li><a href="https://alimir.ir"><img alt="دنیای وردپرس و برنامه نویسی" src="wp3.png" title="دنیای وردپرس" /></a></li>
<li><a href="https://alimir.ir"><img alt="دنیای وردپرس و برنامه نویسی" src="wp3.png" title="دنیای وردپرس" /></a></li>
<li><a href="https://alimir.ir"><img alt="دنیای وردپرس و برنامه نویسی" src="wp3.png" title="دنیای وردپرس" /></a></li>
<li><a href="https://alimir.ir"><img alt="دنیای وردپرس و برنامه نویسی" src="wp3.png" title="دنیای وردپرس" /></a></li>
<li><a href="https://alimir.ir"><img alt="دنیای وردپرس و برنامه نویسی" src="wp3.png" title="دنیای وردپرس" /></a></li>
</ul>

و در ادامه به سراغ بخش اصلی کار، یعنی جی کوئری میریم.
در قدم اول: یک آرایه با عناصر شماره رنگ تعریف میکنیم. (نکته » می تونید به تعداد دلخواه، عناصر این آرایه رو کم یا زیاد کنید.)
و در قدم بعد: با تعریف سکلتور عناصر بالا و استفاده از خاصیت .css()  به تک تک المانها مقادیر آرایه رو استایل دهی میکنیم.

JQUERY:

var colors = ["4D3D98", "0C8B44", "88288F", "D24827", "00A0B1"];
$('.box li').each(function(i) {
$(this).css('background-color', '#'+colors[i % colors.length]);
});

و کار تمومه…