2012-08-23 34 views
11

Tôi đang thêm không đồng bộ một vài tập lệnh và bảng định kiểu vào dự án mà tôi đang xây dựng và muốn giữ các tờ mẫu được nhóm lại với nhau trong HEAD.Jquery thêm css vào đầu

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

Tôi hiện đang sử dụng

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

mà hoạt động tốt, nhưng nó thêm nó vào dưới cùng của phần HEAD của tôi là bạn có thể thấy trong ví dụ.

OCD trong tôi muốn thêm nó trước liên kết kiểu đầu tiên hoặc sau liên kết kiểu cuối cùng.

Cảm ơn bạn đã tìm kiếm.

Trả lời

26

Điều này sẽ đặt link mới sau khi link vừa qua đã có trong phần tử head của bạn.

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

Tuy nhiên nếu bạn chưa có một link ở nơi này sẽ không thêm mới link. Vì vậy, bạn nên làm một tấm séc đầu tiên:

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

Các OCD trong tôi muốn thêm nó vào trước khi liên kết kiểu đầu tiên của tôi hoặc sau khi liên kết phong cách cuối cùng.

Bạn nên quyết định vị trí chính xác của link sẽ được đặt. Có khả năng một vị trí khác có thể ghi đè lên các kiểu hiện có.

+0

Tốt câu trả lời, có vẻ như chúng tôi đã trả lời cùng một lúc. Tuy nhiên, điều này sẽ chèn nó sau phần tử cuối cùng của bất kỳ phần tử liên kết nào trong đầu, không chỉ là liên kết biểu định kiểu cuối cùng theo yêu cầu. –

+0

@blesh Chúc mừng, tương tự như vậy câu trả lời của bạn không tính đến những gì xảy ra nếu không có phần tử 'liên kết' nào. – Curt

+1

Meh, tôi đang xóa câu trả lời của tôi sau đó và xóa bỏ phiếu giảm giá của tôi. Tôi muốn sửa chữa một vài điều về bạn tuy nhiên ... Tôi muốn tạo ra