20

構築しているプロジェクトにいくつかのスクリプトとスタイルシートを非同期的に追加しており、スタイルシートをすべてHEADにグループ化したままにしておきたいと考えています。

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

私は現在使用しています

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

これは正常に機能しますが、例でわかるように、HEADセクションの下部に追加されます。

私のOCDは、最初のスタイルリンクの前または最後のスタイルリンクの後に追加したいと思います。

見てくれてありがとう。

4

2 に答える 2

40

linkこれにより、要素内の最後の要素の後に新しい要素が配置linkされますhead。

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

ただし、まだ配置されていない場合、linkこれは新しい を追加しませんlink。したがって、最初にチェックを行う必要があります。

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

私のOCDは、最初のスタイルリンクの前または最後のスタイルリンクの後に追加したいと考えています.

を正確にlink配置する場所を決定する必要があります。別の位置が既存のスタイルを上書きする可能性があります。

于 2012-08-23T14:08:00.643 に答える
6

あなたが使用することができます:

.prepend()

http://api.jquery.com/prepend/

于 2012-08-23T14:08:12.960 に答える