JavaScriptで日付が新しい順・古い順, あいうえお順のSort処理を実装してみた！
こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！ 今回は、JavaScriptで日付が新しい順・古い順, あいうえお順のSort処理を実装する機会があったので、その知見と学びについて共有します。 前提: 基本のSort処理Logicを振り返る 本題の日付が新しい順(降順)・古い順(昇順), あいうえお順のSort処理の実装についての解説に入る前に、基本のSort処理Logicを振り返りましょう。 昇順と降順に関しては、以前にこちらの記事で説明しています。 JavaScriptで配列の要素を昇順や降順での並び替え・Sort処理するには、次のどちらかのメソッドを使用すればOKです。 Array.prototype.sort() 指定配列をSortします(破壊的変更) Array.prototype.toSorted() 指定配列のコピーをSortして実行結果として、返却し
JavaScriptの小技集 - Qiita
はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技をご存じの方はコメント欄にGO。 おことわり この記事は、あくまで"こんなやり方もあるよ"と紹介しているだけなので、何でもかんでもこれらの小技を使うと、かえってコードの可読性を下げる可能性があります。コードサイズと可読性を天秤にかけてどちらが良いかを都度確認しましょう。 記事内の間違った部分の指摘等はこの記事のコメントや編集リクエストでして下さい。 当方コードゴルファーなので、バイト数短縮小技も入れていることをご了承ください（一応該当する節には＊をつけています）。 配列 配列の重複した値を削除1 const meta = ["foo",
Did You Know the Ordered List Element Has Start and Reversed Attributes? | CSS-Tricks
And the start attribute can be added to begin the list at a number other than one, like this: <ol start="2"> <li>Apple</li> <li>Banana</li> <li>Pear</li> </ol> I’m not sure how I never knew about these properties! I guess I can see how they might come in handy in the future. There are plenty of times when we need to break up ordered lists here on CSS-Tricks with things like code blocks and having
CSS で何番目の要素を指定する方法 - by Takumi Hirashima
CSS で何番目の要素を指定する方法を紹介します。 例えば、前から後ろから何番目の要素の見た目を変えたい時などに便利な方法です。 前から数えてn番目の要素にスタイルを適用 前から数えてnの倍数の要素にスタイルを適用 前から数えてn番目の要素からnの倍数の要素にスタイルを適用 説明に使用するベースの HTML は次の通りです。 ここでは、ul タグに含まれる li タグを対象に説明します。 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> 前から数えてn番目の要素にスタイルを適用 前から数えてn番目の要素にスタイルを適用する場合は、CSS の疑似クラス :nth-child() を使用します。 例えば、前から数えて3番目の要素を変更する場合は、対象の要素（例の場合 li タグ）に値「3」を加えた擬似要素 :nt
リストにCSSカウンターで数字を表示して全体的にグラデーションカラーにする
Result CSSカウンターで加えた数字をグラデーションに、というもの スクロールしても色が変わらず維持できます だからどうしたと言われたらまぁ言い返す言葉も無いんですが css/* リストのスタイル*/ li { counter-increment: index; display: flex; align-items: center; padding: 12px 0; box-sizing: border-box; } /* カウンター表示 */ li::before { content: counters(index, ".", decimal-leading-zero);/*先頭に0を付けて桁数を一定にする*/ text-align: right; font-weight: bold; min-width: 50px; padding-right: 12px; align-self
JavaScriptで何番目の要素か確認する方法
2017/08/09 JavaScriptでその要素が、ある集合の中で何番目にあるかを知りたい場合は、配列メソッドのindexOf()を利用するのがお手軽です。HTMLCollectionから配列を作成してやる必要があります。 サンプルコード#targetのli要素が、何番目に配置されているかを取得する例です。番号は0から数えます。 <ul> <li>あ</li> <li>い</li> <li id="target">う</li> <li>え</li> <li>お</li> </ul>// 要素が含まれる集合オブジェクト (HTMLCollectionなど) var elements = document.getElementsByTagName( "li" ) ; // 番号を知りたい要素 var element = document.getElementById( "target" )
[CSS]シンプルなHTMLで、美しいプログレスバーを実装するスタイルシートのテクニック
フォームなどのタスク完了までの進捗状況を表示するプログレスバーを実装するスタイルシートのテクニックを紹介します。 シンプルなHTMLで実装されており、画像は一切無し、文字要素とborderとborder-radiusでビジュアル化されています。 <ol class="progress-bar"> <li class="is-active"><span>Objective & Template</span></li> <li><span>Options</span></li> <li><span>Step</span></li> <li><span>In a Nutshell</span></li> <li><span>Step</span></li> <li><span>Step</span></li> <li><span>Launch Date</span></li> <li><
![[CSS]シンプルなHTMLで、美しいプログレスバーを実装するスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/df461a26bab475edec4a0c05094f3ffa87cb2302/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018091701.gif)
WordPressの投稿画面で入れ子になったカテゴリ選択ボックスの階層を保つ方法 | それからデザイン スタッフブログ
WordPressで記事を投稿するとき、入れ子になったカテゴリにチェックをして保存をすると、 選択されているカテゴリが一番上に表示され、カテゴリ選択ボックスの階層が崩れて表示されてしまいます。 この現象に違和感を感じてる方もおられるのではないでしょうか？ 例えば、下のような入れ子になったカテゴリ構造だとして 中間的な親カテゴリ「海外」にチェックを入れて記事を保存すると・・・ 選択したカテゴリーが一番上に表示されカテゴリ階層が崩れてしまいます・・・ WordPressをCMSとして利用している者としては、やはりカテゴリは隣接するカテゴリが常に同じカテゴリでないと操作に迷ってしまったり、視覚的にメニュー位置でカテゴリ全体の構造を把握したほうが操作しやすいのではないでしょうか？ そこで、入れ子になったカテゴリにチェックをして保存をしても、カテゴリ選択ボックスのカテゴリ階層を保つ方法をご紹介したい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
順番の乱れたobjectをkeyでsortする.js
反復処理の制御｜イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理