1. はじめに
JavaScriptを使用して、特定の表示状態を持つ要素の中でインデックスを取得する方法について解説します。例えば、display: none; の要素を除外して、表示されている要素だけのインデックスを取得したい場合があります。
この記事では、jQueryを使用する方法とバニラJavaScript（純粋なJavaScript）を使用する方法の両方を紹介し、それぞれのメリット・デメリットについても解説します。
2. インデックス取得の基本概念
インデックスとは？
HTMLにおけるインデックスとは、特定の要素が親要素内で何番目に存在するかを示す番号です。例えば、li 要素が並んでいる場合、それぞれのリストアイテムには0から始まるインデックスがあります。
display: none の要素を除外する理由
通常の querySelectorAll() や getElementsByTagName() などを使うと、非表示の要素（display: none）も含めてインデックスが計算されます。しかし、実際に表示されている要素の中でのインデックスを取得する場合、非表示要素は無視する必要があります。
3. jQueryを使ったインデックス取得方法
jQueryでは、:visible セレクタを活用することで、表示されている要素のみを取得できます。
コードサンプル（jQuery）
$(document).ready(function() {
$(".item").click(function() {
var visibleItems = $(".item:visible");
var index = visibleItems.index(this);
console.log("表示されている要素のインデックス: " + index);
});
});解説
.item:visibleを使用して、表示されている.itemのみを取得.index(this)でクリックした要素のインデックスを取得
この方法を使うと、display: none; の要素を無視してインデックスを取得できます。
4. バニラJS（純粋なJavaScript）を使ったインデックス取得方法
jQueryを使わずに、バニラJavaScriptで同様の処理を行うには、querySelectorAll() と getComputedStyle() を組み合わせます。
コードサンプル（バニラJS）
document.addEventListener("DOMContentLoaded", function() {
let items = document.querySelectorAll(".item");
items.forEach(item => {
item.addEventListener("click", function() {
let visibleItems = Array.from(items).filter(el =>
window.getComputedStyle(el).display !== "none"
);
let index = visibleItems.indexOf(this);
console.log("表示されている要素のインデックス: " + index);
});
});
});解説
querySelectorAll(".item")で.item要素を全取得Array.prototype.filter()を使い、getComputedStyle(el).display !== "none"で表示されている要素のみを抽出indexOf(this)を使い、クリックされた要素のインデックスを取得
この方法を使えば、jQueryなしでも効率的にインデックスを取得できます。
5. jQuery vs バニラJS：どちらを使うべきか？
| 比較項目 | jQuery | バニラJS |
|---|---|---|
| コードの簡潔さ | ◎ | ○ |
| パフォーマンス | △ | ◎ |
| 可読性 | ◎ | ○ |
| 依存性 | × | ◎ |
jQueryのメリット・デメリット
✅ コードが短く、可読性が高い
✅ :visible など便利なセレクタが使える
❌ jQueryライブラリを読み込む必要がある
❌ パフォーマンスがバニラJSより若干低い
バニラJSのメリット・デメリット
✅ jQueryの読み込みが不要で軽量
✅ ネイティブなJSだけで動作し、モダンな環境で最適
❌ コードがやや長くなりがち
❌ jQueryほど直感的なセレクタが使えない
6. 応用編：特定の条件を追加してカスタマイズする
opacity: 0 の要素も対象外にする
opacity: 0 の要素は display: none ではないため、通常の :visible ではフィルタリングできません。これを除外するには、opacity の値もチェックする必要があります。
修正コード（バニラJS）
let visibleItems = Array.from(items).filter(el => {
let style = window.getComputedStyle(el);
return style.display !== "none" && style.opacity !== "0";
});visibility: hidden の場合の処理
visibility: hidden; も display: none; ではないため、見えなくても :visible には含まれます。これを除外するには、visibility のチェックを追加します。
修正コード（バニラJS）
let visibleItems = Array.from(items).filter(el => {
let style = window.getComputedStyle(el);
return style.display !== "none" && style.opacity !== "0" && style.visibility !== "hidden";
});7. まとめ
どの方法を選ぶべきか？
- 手軽に実装したい場合 → jQuery
- 軽量でパフォーマンスを重視する場合 → バニラJS
実際の開発での活用ポイント
display: noneだけでなく、opacity: 0やvisibility: hiddenも考慮する- jQueryを使うかバニラJSを使うかは、プロジェクトの要件に応じて決定
以上、JavaScriptとjQueryを用いた特定の表示状態を持つ要素のインデックス取得方法について解説しました！
この方法を活用して、より柔軟な要素の管理を実現しましょう。