要素の順番を整えるスタイルシートをjsでhtmlにインラインで書き込む方法

html上に順番がバラバラになっている要素をjavascriptを使って順番を整えるためのスタイルシートをjsで書き込む方法になります。

想定と解決方法

まず下記のような要素があるとします。

これをアイテム1～アイテム3まで順番に並べたいとします。

<div class="box">
        <p class="item02">アイテム2</p>
        <p class="item01">アイテム1</p>
        <p class="item03">アイテム3</p>    
</div>

なおかつ下記のようなinputに上のクラス名と同じvalueがあるとします。

順番はitem01～item03まで並んでいます。

<div class="data">
        <input type="hidden" value="item01">
        <input type="hidden" value="item02">
        <input type="hidden" value="item03">
</div>

この状態でhtmlは修正できないけれどアイテム1～アイテム3の順番に変えたい場合。

順番に並ばせるためのスタイルシートをjsで出力する

jQuery(function() {
        let inlineStyleCreate = '';
        inlineStyleCreate += '<style>';
       
        let count = 0;
    jQuery('.data > input').each(function () {
                let inputValueData = '.' + jQuery(this).val();
                console.log('inputValueData: ' + inputValueData);
                count ++;
                inlineStyleCreate += inputValueData + '{order: ' + count + ';}';
    });
        inlineStyleCreate += '</style>';
        jQuery('body').append(inlineStyleCreate);
});

上記は変数「inlineStyleCreate」に<style>～</style>を作っていきます。

<style>～</style>の中はさきほどのinputのvalueをeachでループさせながら取得してクラス名にorderを指定していきます。

orderの番号はカウントして取得していきます。

作成した<style>～</style>をbodyのなかに書き込みます。

これでアイテム2、アイテム1、アイテム3で並んだものをアイテム1、アイテム2、アイテム3に並べ替えることができました。

今回の内容はhtmlが修正できない場合にcssとjsを使って順番を入れ替える一例になります。

通常はhtmlを直せば大丈夫ですがhtmlを修正できない場合もあります。

そんなときにcssやjsを使ってどのようにして解決させるかということをいつも考えているといろいろ見えてくると思います。

サンプル