2011-10-12 49 views
8

私は浮動幅のウェブサイトを作成しています。ユーザーはフルHD解像度からスマートフォンで約600pxまでの画面を使用していますが、これはかなり良い考えです。これは非常に興味深い問題を引き起こします。要素の順序を変更する

ユーザーが最適な解像度よりも小さい解像度を使用すると、ページの高さがさらに高くなります。つまり、いくつかの要素の順序(たとえば、画像、検索ボックス、ナビゲーションなど)を変更して、ページを読みやすくする必要がなくなり、読みやすくすることができます。

DOMにアクセスしてページ要素の順序を入れ替える必要があります(スワップする必要があります)。

は、私がリストを持っており、項目1および2

<ul> 
    <li>1</li> 
    <li>2</li> 
</ul> 

私は機能appendChildを使用して<ul>にすでに項目の要素を追加し基づいて解決策を見つけたを交換する必要があるとしましょう。しかし、テキストノードには問題があります。そして、それをもう一度作り直す必要があるので、より難しい要素構造のためにそれを行うことは本当に複雑になります。

改善のためのアドバイスがありますか?この単純な場合(2つのだけの要素を交換する)ため

+1

jQueryの学習に投資する時間。このタイプのアクティビティはずっと簡単になります。 –

+0

メディアクエリ? –

+0

もっと具体的になりますか?今はそのライブラリですが、これに便利なAPIへのリンクが役立ちます。 –

答えて

11

、単に同一のノードが複数の位置に存在することができないappendChild()fiddle

var list = document.querySelector("ul"); 
list.appendChild(list.firstElementChild); 

を使用することができます。したがって、現在の位置から削除され、コレクションの最後に配置されます。

あなたがより複雑なソートを行いたい場合は、おそらくのchildNodes(yaf)から配列を作成し、すべてが狂っ得るべき:

var list = document.querySelector("ul"); 
var items = list.querySelectorAll("li"); 
var sortedList = Array.from(items).sort(function(a, b) { 
    var c = a.firstElementChild.textContent, 
    d = b.firstElementChild.textContent; 
    return c < d ? -1 : c > d ? 1 : 0; 
}); 
for (let item of sortedList) { 
    list.appendChild(item); 
} 
0

はinnerHTMLのも仕事スワップではないでしょうか?

var myList = document.getElementsByTagName("ul")[0]; 
temp = myList.getElementsByTagName("li")[0].innerHTML; 
myList.getElementsByTagName("li")[0].innerHTML = myList.getElementsByTagName("li")[1].innerHTML; 
myList.getElementsByTagName("li")[1].innerHTML = temp; 
+1

innerHTMLに書き込む際には、イベントハンドラやその他のプロパティに望ましくない影響を及ぼす可能性があるので注意してください。 例:http://stackoverflow.com/a/5113120/370786 – Rolf

+0

この場合、document.bodyでこれを試してみてください。簡単な例 - > https://jsfiddle.net/tzv5db93/ –

関連する問題