2012-08-23 10 views
11

Aggiungo asincronicamente alcuni script e fogli di stile a un progetto che sto creando e vorrei mantenere i fogli di stile tutti raggruppati nell'HEAD.Jquery aggiunge css alla testa

<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> 

Attualmente sto usando

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

che funziona bene, ma si aggiunge al fondo della mia sezione HEAD come si può vedere nell'esempio.

L'OCD in me vorrebbe aggiungerlo prima del mio primo collegamento di stile o dopo l'ultimo collegamento di stile.

Grazie per la ricerca.

risposta

26

Questo inserirà il nuovo link dopo l'ultimo link già nell'elemento head.

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

Tuttavia, se non si dispone già di un link in atto questo non aggiungerà il nuovo link. Pertanto si dovrebbe fare un controllo prima:

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); 
} 

L'OCD dentro di me vorrebbe aggiungere neanche prima del mio primo link stile o dopo l'ultimo anello stile.

È necessario decidere dove posizionare esattamente lo link. C'è la possibilità che una posizione diversa possa sovrascrivere gli stili esistenti.

+0

Buona risposta, sembra che abbiamo risposto allo stesso tempo. Tuttavia, questo verrà inserito dopo l'ultimo di qualsiasi elemento di collegamento nella testa, non solo l'ultimo collegamento al foglio di stile come richiesto. –

+0

@blesh Cheers, allo stesso modo la tua risposta non tiene conto di cosa succede se non ci sono già elementi 'link'. – Curt

+1

Meh, sto cancellando la mia risposta, quindi rimuovendo il mio downvote. Tuttavia, sistemerei alcune cose sul tuo ... Creerei la

Problemi correlati