And After - Design e Tecnologia por Sua Conta!
O desenvolvedor é um blog sobre desenvolvimento web, não tratando apenas de programação mas também compartilhando experiências, métodos, debates e tendências da internet.

O Desenvolvedor é um blog de www.andafter.org
Assinar o Feed RSS

Guilherme Serrano

[@]
[www]

Graduado em design, viciado em web, adoro desenvolvimento, mashups, usabilidade, o universo e tudo mais.

Vivo de e para internet. :)

Status
Karma: 32261
Opiniões: 30

Mais deste autor


Shuffle - embaralhando listas e arrays com jQuery

Shuffle - embaralhando listas e arrays com jQuery

Muito bomEste texto foi classificado como Muito bom
Em Internet, Programação
Por Guilherme Serrano
7 de Janeiro de 2009

Plugin jQuery para embaralhar (randomizar) listas de html ou arrays de javascript.

RSS Acompanhe O Desenvolvedor por Feeds!


Faz tempo que quero lançar uma nova versão da Vitrine Fácil Buscapé, e isso está sendo desenvolvido. Como agora estudei e domino um pouco mais jQuery isso está facilitando muito os testes e desenvolvimento de novas ferramentas.

Uma das idéias era permitir a exibição randômica de produtos, para isso pesquisei sobre arrays em javascript (é, eu não sei nada de js mesmo) e acabei descobrindo um interessante plugin desenvolvido por Ca Phun Ung (thanks!).

O plugin (shuffle) serve para embaralhar um array ou todos os children dentro de um elemento HTML (listas, parágrafos, imagens...).

 

Shuffle

/*
 * jQuery shuffle
 *
 * Copyright (c) 2008 Ca Phun Ung 
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * http://yelotofu.com/labs/jquery/snippets/shuffle/
 *
 * Shuffles an array or the children of a element container.
 * This uses the Fisher-Yates shuffle algorithm 
 */
 
(function($){

	$.fn.shuffle = function() {
		return this.each(function(){
			var items = $(this).children();
			return (items.length) ? $(this).html($.shuffle(items)) : this;
		});
	}
	
	$.shuffle = function(arr) {
		for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
		return arr;
	}
	
})(jQuery);

 

A utilização é bem simples:

 

$(´ul´).shuffle();

 

E para array:

var arr = [1,2,3,4,5,6];
arr = $.shuffle(arr);

 

Veja um exemplo funcionando.

Não poderia ser mais prático!

Agora é só fazer vitrines, produtos, fotos randômicas...  :)

O que você achou do texto?

  • Muito ruim
  • Ruim
  • Regular
  • Bom
  • Muito bom
Sua opinião é o que faz a comunidade funcionar, colabore para isso!

Tags: jquery, javascript, desenvolvimento, programacao, internet

Enviar para um amigo
Você pode comentar, assinar o feed, conhecer mais sobre o autor e ajudar a divulgar este artigo em sua ferramenta favorita através dos botões abaixo.
  • Rec6
  • ueba
  • linkk
  • dihitt
  • linkloko
  • websapiens
  • linkto
  • Eu curti

Comentários

Deixe seu comentário!

Nome (requerido)

E-mail (requerido - não será divulgado)

URL

Quanto é 3 + 1?




web tracker