Sprite

Eu tenho uma lista com o atributo style="background-image:url(etc)" diferente em cada elemento <a> e um script que cria um <span></span> depois do <a> para criar um efeito de fade-in / fade-out em vez de um simples :hover... Como o background-image é um estilo inline, eu teria que copiá-lo para o <span> que é criado depois do <a> para ter o efeito.... O problema é que quando a função roda o .parent().attr("style") ele não pega o atrbituo style="" do elemento pai, ou seja, do <a> que está contendo o <span> para cada <li>, mas apenas o do primeiro <a>!

Vejam como está funcionando:

Em código:

if ($.browser.msie && $.browser.version < 7) return;    $('#navigation li')    .removeClass('highlight')    	.find('a')    .append('<span class="hover" />').each(function () {      var $span = $('span.hover', this).attr('style', $("span.hover").parent().attr("style"));      var $span = $('> span.hover', this).css('opacity', 0);							      $(this).hover(function () {        $span.stop().fadeTo(500, 1);      }, function () {        $span.stop().fadeTo(500, 0);      });    });	});</script>

O HTML normal:

<ul id="navigation">      <li class="highlight">        <a href="#" class="triplov" style="background-image:url(images/1.jpg);"><h2>Item #1</h2></a>      </li>      <li class="highlight">        <a href="#" class="unico" style="background-image:url(images/2.jpg);"><h2>Item #2</h2></a>      </li>      <li class="highlight">        <a href="#" class="unico" style="background-image:url(images/3.jpg);"><h2>Item #3</h2></a>      </li>    </ul>

Como deveria ficar:

<ul id="navigation">      <li class="">        <a href="#" class="triplov" style="background-image:url(images/1.jpg);"><h2>Item #1</h2>        <span class="hover" style="background-image: url(images/1.jpg); opacity: 1;"/></a> //aqui está o :hover e fade acontecendo      </li>      <li class="">        <a href="#" class="unico" style="background-image:url(images/2.jpg);"><h2>Item #2</h2>        <span class="hover" style="background-image: url(images/2.jpg); opacity: 0;"/></a>      </li>      <li class="">        <a href="#" class="unico" style="background-image:url(images/3.jpg);"><h2>Item #3</h2>        <span class="hover" style="background-image: url(images/3.jpg); opacity: 0;"/></a>      </li></ul>

Mas ele retorna assim:

<ul id="navigation">      <li class="">        <a href="#" class="triplov" style="background-image:url(images/1.jpg);"><h2>Item #1</h2>        <span class="hover" style="background-image: url(images/1.jpg); opacity: 1;"/></a>      </li>      <li class="">        <a href="#" class="unico" style="background-image:url(images/2.jpg);"><h2>Item #2</h2>        <span class="hover" style="background-image: url(images/1.jpg); opacity: 0;"/></a>      </li>      <li class="">        <a href="#" class="unico" style="background-image:url(images/3.jpg);"><h2>Item #3</h2>        <span class="hover" style="background-image: url(images/1.jpg); opacity: 0;"/></a>      </li></ul>

Ele só pega o background-image do 1º <a> e não dos seguintes! Procurando sobre a função .each() eu acabei encontrando o seguinte:

Each getter only returns the value of the first element of the collection.

Alguma idéia ou solução?

Olá pessoal, este é o meu primeiro post e já começo com uma questão meio complicada...
Estou desenvolvendo um tema no Wordpress e na index eu teria 6 quadrados de destaque logo abaixo do topo e da barra de navegação. A parte do Wordpress não é o problema, mas sim como estes destaques ficariam dispostos:

• Seriam 4 colunas para 3 linhas e 6 itens que seriam definidos na página administrativa do Wordpress nas propriedades do tema
• Sempre seriam 6 itens, nem mais, nem menos
• Cada item de destaque poderia ter 6 tamanhos diferentes

Dessa forma, o administrador do site poderia deixar a parte de destaques com o look and feel que ele quisesse a cada atualização...

Agora vem os problemas:

Definindo os itens e os destaques pelo painel ainda não é a questão, a dificuldade que estou tendo é com o posicionamento. Coloquei todos os ítens com um float:left no CSS (se colocasse right não faria diferença, só inverteria a ordem), o código mais ou menos assim:

<ul id="navigation">          <li class="highlight"><a href="#" class="triplov">Kylie Minogue</a></li>          <li class="highlight"><a href="#" class="unico">Item 4</a></li>          <li class="highlight"><a href="#" class="unico">Item 2</a></li>          <li class="highlight"><a href="#" class="duplov">Camisa Jeans?</a></li>          <li class="highlight"><a href="#" class="duplov">Gossip<br />Music For Man</a></li>          <li class="highlight"><a href="#" class="triploh">São Paulo</a></li>        </ul>

Para resolver pensei em colocar um div para segurar os itens menores e assim formar uma coluna com o tamanho da coluna do lado direito e funcionou!

<ul id="navigation">          <li class="highlight"><a href="#" class="triplov">Kylie Minogue</a></li>          <div id="segurador">          <li class="highlight"><a href="#" class="unico">Item 4</a></li>          <li class="highlight"><a href="#" class="unico">Item 2</a></li>          </div>          <li class="highlight"><a href="#" class="duplov">Camisa Jeans?</a></li>          <li class="highlight"><a href="#" class="duplov">Gossip<br />Music For Man</a></li>          <li class="highlight"><a href="#" class="triploh">São Paulo</a></li>        </ul>

Agora vem a grande dúvida:

Como isso vai ser dinâmico, a ordem das colunas vai ser definida a cada vez que o administrador quiser mudar os destaques, ou seja, eu tenho que deixar tudo "solto" para depois dependendo da combinação de classes seguidas colocar os workarounds. Como faço para filtrar quando houver de duas ou mais <li><a class="unico"></a></li> seguidas uma da outra e colocá-las dentro do Div com a id #segurador?
Sei que eu também teria quase o mesmo tipo de problema também para as linhas verticais, mas conseguindo solucionar esta parte, já está ótimo!
Não quero colocar o <div> antes de cada item com essa classe, seria apenas quando as classes se repetissem logo atrás da outra.

A outra solução seria já que eu utilizarei uma página de setup dessa parte de destaques eu usar position:absolute e algo WYSIWYG com o PHP e formulários, mas eu acho que isso daria mais trabalho do que usar como já estou usando, além de que jogo todos os estilos no CSS e as únicas coisas que ficariam inline seriam as imagens de background para o efeito de hover que eu estou utilizando, já com posicionamento absoluto o código final ficaria meio "sujo" sem semântica nnehuma.

Ou, existe algo ***mágico*** que faça todos os floats se encaixarem nos buracos a medida que colidem?