2012-08-23 13 views
11

Estoy agregando asincrónicamente algunas secuencias de comandos y hojas de estilo a un proyecto que estoy creando y me gustaría mantener todas las hojas de estilo agrupadas en HEAD.Jquery agregar css a la cabecera

<head> 
    <title>home</title> 
    <meta charset="utf-8"> 
    <link rel="Shortcut Icon" type="image/ico" href="/img/favicon.png"> 

    <!-- STYLES--> 
    <link rel="stylesheet" href="/css/fonts-and-colors.css" type="text/css" media="screen"> 
    <link rel="stylesheet" href="/css/layout.css" type="text/css" media="screen"> 

    <!-- JS--> 
    <script type="text/javascript" async="" src="/js/light-box.js"></script> 
    <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="/js/grade-button.js"></script> 
    <script> 
    $(document).ready(function() { 
     // some code 
    }); 
    </script> 
    <link rel="stylesheet" href="/css/masterBlaster.css" type="text/css" media="screen"> 
</head> 

actualmente estoy usando

$("head").append("<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>"); 

que funciona muy bien, pero se añade a la parte inferior de mi sección HEAD como se puede ver en el ejemplo.

El OCD en mi me gustaría agregarlo antes de mi primer enlace de estilo o después del último enlace de estilo.

Gracias por mirar.

Respuesta

26

Esto colocará el nuevo link después de la última link ya en su elemento head.

$("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>"); 

Sin embargo, si usted no tiene ya un link en su lugar esto no va a añadir el nuevo link. Por lo tanto usted debe hacer una verificación en primer lugar:

var $head = $("head"); 
var $headlinklast = $head.find("link[rel='stylesheet']:last"); 
var linkElement = "<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>"; 
if ($headlinklast.length){ 
    $headlinklast.after(linkElement); 
} 
else { 
    $head.append(linkElement); 
} 

El TOC en me gustaría añadir que, ya sea antes de mi primer eslabón estilo o después del último eslabón estilo.

Debería decidir dónde exactamente se va a colocar el link. Existe la posibilidad de que una posición diferente pueda anular los estilos existentes.

+0

Buena respuesta, parece que respondimos al mismo tiempo. Sin embargo, esto lo insertará después del último elemento de enlace en el encabezado, no solo el último enlace de la hoja de estilo como se solicitó. –

+0

@blesh Cheers, del mismo modo su respuesta no tiene en cuenta lo que sucede si ya no hay elementos 'link'. – Curt

+1

Meh, estoy borrando mi respuesta y quitando mi voto downvote. Sin embargo, arreglaría algunas cosas sobre el tuyo ... Crearía la