نمایش المنتها بصورت Random توسط جی کوئری

JavaScript

توسط reza-irdev در 3 سال پیش
0 2.5k 2 3 سال پیش
reza-irdevmajidmagicc0der
5

سلام دیدم سوالاتی در مورد نمایش المنتهای  HTML بصورت تصادفی پرسیده میشه به همین علت در این پست راه حل جی کوئری رو گذاشتم.

این مشکل با استفاده از یک پلاگین بسیار ساده جی کوئری براحتی حل میشه

[size=x-large]مثال[/size] کد html:

<div class="all">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

کد جاوا اسکریپت:

(function (d) {
    d.fn.shuffle = function (c) {
        c = [];
        return this.each(function () {
            c.push(d(this).clone(true))
        }).each(function (a, b) {
            d(b).replaceWith(c[a = Math.floor(Math.random() * c.length)]);
            c.splice(a, 1)
        })
    };
    d.shuffle = function (a) {
        return d(a).shuffle()
    }
})(jQuery);

$(function () {
    $('.all > div').shuffle();
});

کد اصلی همون تکه کدی است که در اخر استفاده شده یعنی:$('.all > div').shuffle();

دمو: http://jsfiddle.net/z136btcu/

آخرین ویرایش: 31-12-2014 ساعت 11:50، توسط Reza
0

سلام این کد چیکار میکنه؟ خیلی دیدم استفاده میکنن!

$(function () {
...
1

> سلام این کد چیکار میکنه؟ خیلی دیدم استفاده میکنن! ``` $(function () { ... ```

سلام معال  این کده:

$( document ).ready(function() {
 ...
})

كدای داخل این بلاک بعد ار بارگذاری سند اجرا میشن.

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.

لطفا ابتدا لاگین کنید