jQuery $.unique() メソッド

jQuery $.unique() メソッド詳解 - 配列から重複要素を削除

この記事では、jQuery の $.unique() メソッドについて詳しく解説します。このメソッドは、配列から重複する DOM 要素を削除するために使用されます。使用方法、サンプルコード、注意点などを紹介します。

1. $.unique() メソッドの概要

$.unique() メソッドは、配列から重複する DOM 要素を削除します。このメソッドは、DOM 要素の配列に対してのみ機能し、他の種類の配列には使用できません。

2. 構文とパラメータ

$.unique() メソッドの構文は次のとおりです。

$.unique( array )

パラメータ `array` は、重複する要素を削除する対象の配列です。

3. 戻り値

$.unique() メソッドは、`array` 内の重複しない要素を含む新しい配列を返します。要素の順序は、元の配列で最初に現れた順序と同じです。

4. 使用例

以下は、$.unique() メソッドを使用して DOM 要素の配列から重複する要素を削除する例です。

例1：重複する DOM 要素を含む単純な配列から重複要素を削除する

<ul>
  <li>項目 1</li>
  <li>項目 2</li>
  <li>項目 1</li>
  <li>項目 3</li>
</ul>

<script>
  $(document).ready(function(){
    var listItems = $('li').toArray();
    var uniqueItems = $.unique(listItems);
    console.log(uniqueItems); 
  });
</script>

この例では、まず `$('li')` を使用してすべてのリストアイテムを選択し、`toArray()` メソッドを使用してそれらを配列に変換しています。次に、`$.unique()` メソッドを使用して、この配列から重複する要素を削除しています。最後に、`console.log()` を使用して、重複が削除された配列を表示しています。

例2：jQuery セレクタを使用して取得した DOM 要素の集合から重複要素を削除する

<div class="item">アイテム 1</div>
<div class="item">アイテム 2</div>
<div class="item">アイテム 1</div>
<div class="item">アイテム 3</div>

<script>
  $(document).ready(function(){
    var items = $('.item');
    var uniqueItems = $.unique(items);
    console.log(uniqueItems); 
  });
</script>

この例では、`$('.item')` を使用してクラス名が "item" のすべての要素を選択しています。`$.unique()` メソッドは、jQuery オブジェクトに対して直接使用することもできます。この場合も、重複が削除された配列が返されます。

5. 注意点

$.unique() メソッドは、DOM 要素の配列に対してのみ機能します。他の種類の配列 (数値や文字列の配列など) に対して使用しようとすると、予期しない結果になる可能性があります。他の種類の配列から重複する要素を削除するには、JavaScript ネイティブの `Set` オブジェクトなど、他の方法を使用することをお勧めします。

6. まとめ

$.unique() メソッドは、DOM 要素の配列から重複する要素をすばやく簡単に削除するために使用できる便利なメソッドです。詳細については、jQuery の公式ドキュメントを参照してください。