jQueryで値を検索する方法を徹底解説！
入力フォームやセレクトボックスなど、様々な要素の値を取得・検索する方法を、豊富なサンプルコードと合わせて分かりやすく解説します。目的の要素をピンポイントで取得する方法から、複数の要素から条件に合致するものを絞り込む方法まで、jQueryを使った効率的な値の検索方法をマスターしましょう。
value属性を持つ要素の値を取得・検索
テキストボックス、テキストエリア、セレクトボックスなどの値は、val() メソッドを使って取得できます。また、チェックボックスやラジオボタンなどの状態は、:checked セレクタを使って取得できます。
サンプルコード
<input type="text" id="name" value="山田太郎">
<select id="city">
<option value="tokyo">東京</option>
<option value="osaka" selected>大阪</option>
<option value="fukuoka">福岡</option>
</select>
<input type="checkbox" id="agree" checked>
<button id="get-value">値を取得</button>
<script>
$(function() {
$("#get-value").click(function() {
const name = $("#name").val();
const city = $("#city").val();
const agree = $("#agree:checked").length ? "同意" : "未同意";
alert("名前: " + name + "\n都市: " + city + "\n同意: " + agree);
});
});
</script>
解説
*$("#name").val(); でテキストボックスの値を取得しています。
* $("#city").val(); でセレクトボックスの選択されている値を取得しています。
* $("#agree:checked").length でチェックボックスがチェックされているかどうかを判定しています。
要素の内容から検索
:contains() セレクタを使うと、特定の文字列を含む要素を検索できます。より複雑な条件で要素を絞り込みたい場合は、filter() メソッドと組み合わせて使用します。
サンプルコード
<ul id="fruits">
<li>りんご</li>
<li>みかん</li>
<li>バナナ</li>
</ul>
<script>
$(function() {
// "ん" を含む要素を取得
const fruitsWithN = $("#fruits li:contains('ん')");
console.log(fruitsWithN);
// 3文字以上の要素を取得
const longFruits = $("#fruits li").filter(function() {
return $(this).text().length >= 3;
});
console.log(longFruits);
});
</script>
解説
*$("#fruits li:contains('ん')") で "ん" を含むリストアイテムを取得しています。
* filter() メソッドの中で $(this).text().length >= 3 の条件に合致する要素だけを絞り込んでいます。
テーブルデータの検索
テーブル内の特定の値を持つ行を検索するには、each() メソッドと条件分岐を使用します。find() メソッドを使えば、テーブルセル内の特定の要素を検索することもできます。
サンプルコード
<table id="product-table">
商品名
価格
在庫数
りんご
100
50
みかん
50
30
バナナ
80
20
<script>
$(function() {
// 価格が100円の商品名を取得
$("#product-table tbody tr").each(function() {
const price = $(this).find("td:eq(1)").text();
if (price === "100") {
const productName = $(this).find("td:eq(0)").text();
console.log(productName);
}
});
});
</script>
解説
*each() メソッドでテーブルの各行を順番に処理しています。
* find("td:eq(1)") で2番目のセル（価格）を取得し、値をチェックしています。
* 条件に合致する場合は、find("td:eq(0)") で最初のセル（商品名）を取得しています。
検索結果の活用
取得した要素に対しては、値の変更、スタイルの変更、イベントの追加など、様々な操作を行うことができます。また、検索結果を強調表示したり、リスト表示したりすることで、ユーザーに分かりやすく情報を伝えることができます。
サンプルコード
<input type="text" id="search-keyword">
<ul id="search-results"></ul>
<script>
$(function() {
$("#search-keyword").on("keyup", function() {
const keyword = $(this).val();
const results = $("#fruits li:contains(" + keyword + ")");
$("#search-results").empty();
if (results.length > 0) {
results.each(function() {
$("#search-results").append("<li>" + $(this).text() + "</li>");
});
} else {
$("#search-results").append("<li>該当する結果は見つかりませんでした。</li>");
}
});
});
</script>
解説
* キーワード入力欄に文字が入力されるたびに、検索処理を実行しています。 *:contains() セレクタでキーワードを含むリストアイテムを取得し、結果表示エリアに表示しています。
jQueryを使った検索機能の実装例
ここでは、入力フォームと連携した動的な検索機能の実装例を紹介します。ユーザーが入力したキーワードに応じて、データベースから取得したデータを表示するようなケースを想定しています。
サンプルコード
<input type="text" id="search-box">
<div id="search-results"></div>
<script>
$(function() {
$("#search-box").on("keyup", function() {
const keyword = $(this).val();
$.ajax({
url: "/search",
data: { q: keyword },
dataType: "json"
}).done(function(data) {
$("#search-results").empty();
if (data.length > 0) {
const $ul = $("<ul></ul>");
$.each(data, function(index, item) {
$ul.append("<li>" + item.name + "</li>");
});
$("#search-results").append($ul);
} else {
$("#search-results").text("該当するデータはありません。");
}
});
});
});
</script>
解説
*keyup イベントで入力値を取得し、Ajaxでサーバーにリクエストを送信しています。
* サーバーから返却されたデータをもとに、結果表示エリアを更新しています。
関連情報
- jQuery.val() | jQuery API Documentation
- :contains() セレクタ | jQuery API Documentation
- jQuery.filter() | jQuery API Documentation
QA
Q1: val() メソッドで複数の要素の値を取得できますか？
A1: はい、複数の要素をセレクタで指定した場合、val() メソッドは配列で値を返します。
Q2: :contains() セレクタで大文字と小文字を区別せずに検索できますか？
A2: いいえ、:contains() セレクタは大文字と小文字を区別します。大文字と小文字を区別せずに検索するには、JavaScriptの正規表現を使用する必要があります。
Q3: each() メソッドの代わりに for ループを使用できますか？
A3: はい、for ループを使用することもできます。ただし、jQueryオブジェクトに対しては each() メソッドを使用する方が、コードの可読性が向上するケースが多いです。
その他の参考記事:jquery value 取得