seleccionar elementos anteriores a un elemento (jQuery)

[vicent34]

¡Hola! Llevo días intentando solucionar este problemilla, a ver si alguien me puede ayudar.

Tengo una lista de enlaces, a uno de ellos se le asignará una classe "playing" desde una función .addClass (cada vez a uno distinto).

Ejemplo 1

Código HTML:

<div id="enlaces">
<a href="#">Enlace 1</a>
<a href="#">Enlace 2</a>
<a href="#" class="playing">Enlace 3</a>
<a href="#">Enlace 4</a>
<a href="#">Enlace 5</a>
</div> 

Ejemplo 2

Código HTML:

<div id="enlaces">
<a href="#">Enlace 1</a>
<a href="#">Enlace 2</a>
<a href="#">Enlace 3</a>
<a href="#" class="playing">Enlace 4</a>
<a href="#">Enlace 5</a>
</div> 

Busco una función que oculte todos los enlaces anteriores al enlace con la clase "playing" dentro del div con id "enlaces", que consiga:

Para el Ejemplo 1...

Código HTML:

<div id="enlaces">
<a href="#" style="display:none;">Enlace 1</a>
<a href="#" style="display:none;">Enlace 2</a>
<a href="#" class="playing">Enlace 3</a>
<a href="#">Enlace 4</a>
<a href="#">Enlace 5</a>
</div> 

O para el Ejemplo 2...

Código HTML:

<div id="enlaces">
<a href="#" style="display:none;">Enlace 1</a>
<a href="#" style="display:none;">Enlace 2</a>
<a href="#" style="display:none;">Enlace 3</a>
<a href="#" class="playing">Enlace 4</a>
<a href="#">Enlace 5</a>
</div> 

Pero me he encontrado con que la función .hide() no admite selectores!
¿Alguien sabe cómo se puede conseguir esto?
¡Muchas gracias, de antemano!

[tredio]

prueba esto

Código Javascript:

$('#enlaces > a').each(function(){
    var clase = $(this).attr('class');
    if(clase != 'playing')
        $(this).css({display:'none'});
    else
        break;
});
 

[vicent34]

Muchas gracias, tredio, pero el código no funciona..

De todas formas, me has dado la idea clave: usar variables... y ¡Solucionado!

Dejo el código que me funcionó, por si a alguien le sirve más adelante:

Código HTML:

<div id="enlaces">
<a href="#">Enlace 1</a>
<a href="#">Enlace 2</a>
<a href="#">Enlace 3</a>
<a href="#" class="playing">Enlace 4</a>
<a href="#">Enlace 5</a>
</div>

<script>
var listItem = $('.playing');
var indexPlaying = $('#enlaces a').index(listItem);
$(function() {
$('#enlaces a:lt('+ indexPlaying+')').hide('slow');
});
</script> 

¡Un saludo!

[tredio]

que bueno por lo menos haberte dado una idea, suerte.