HOWTO · jQuery
jQuery: データ属性を持つ要素を検索
jQuery を使用してデータ属性を持つ要素を検索するには、find() メソッド、filter() メソッド、または CSS 属性セレクターを使用できます。 この記事では、実用的なコード例を使用して、それらすべてを使用する方法を説明します。
このページの内容
jQuery を使用してデータ属性を持つ要素を検索するには、.find() メソッド、.filter() メソッド、または CSS 属性セレクターを使用できます。 この記事では、実用的なコード例を使用して、それらすべてを使用する方法を説明します。
jQuery .find() メソッドを使用してデータ属性を検索する
jQuery では、.find() メソッドを使用すると、CSS セレクターを使用して Web ページ上の要素を検索できます。 ここで、適切な CSS セレクターを記述すれば、それを使用してデータ属性を見つけることができます。
これから、CSS セレクターに一致する要素を使用して、必要なことを行うことができます。 以下の例では、data-name=Edison を検索し、そのフォント サイズを 3em に変更しました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-find-data-attr</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<main>
<ul>
<li data-name="Edison">Thomas Edison</li>
<li data-name="Einstein">Albert Einstein</li>
<li data-name="Rutherford">Ernest Rutherford</li>
</ul>
</main>
<script>
$(document).ready(function() {
$("ul").find("[data-name='Edison']").css('font-size', '3em');
});
</script>
</body>
</html>
出力：
CSS 属性セレクターを使用してデータ属性を検索する
CSS 属性セレクターを使用してデータ属性を見つけることができます。 ただし、HTML マークアップに応じて、これを行うには 2つの方法があります。
以下の最初の例では、リスト項目にデータ属性があります。 そのため、タグセレクターと CSS 属性セレクターで構成される CSS 子孫セレクターを使用できます。
その結果、必要な要素が正確に一致し、後で CSS スタイルを適用できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-find-data-attr</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
body {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 1.2em;
}
</style>
</head>
<body>
<main>
<ul>
<li data-iso="MRT">Mauritania</li>
<li data-iso="LUX">Luxembourg</li>
<li data-iso="HRV">Croatia</li>
</ul>
</main>
<script>
$(document).ready(function() {
$("ul [data-iso='MRT'").css('color', 'magenta');
});
</script>
</body>
</html>
出力：
以下の 2 番目の例には、別の HTML と jQuery コードがあります。 まず、親の <ul> 要素は HTML で data 属性を持ちます。
これは、最後の例の前のセレクターが機能しないことを意味します。 これを解決するには、<ul> 要素と CSS 属性セレクターの間のスペースを削除します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02_01-jQuery-find-data-attr</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<main>
<ul data-viruses="computer-viruses">
<li>Mydoom</li>
<li>ILOVEYOU</li>
<li>WannaCry</li>
</ul>
</main>
<script>
$(document).ready(function() {
$("ul[data-viruses='computer-viruses']").css('font-style', 'italic');
});
</script>
</body>
</html>
出力：
.filter() メソッドを使用してデータ属性を見つける
.filter() メソッドは、CSS セレクターを使用して HTML 要素を照合します。 これにより、要素の CSS セレクターを渡し、結果を操作できます。
それが、以下のコード例で行ったことです。 前の例とは異なり、jQuery .addClass() メソッドを使用して CSS クラスを追加します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>03-jQuery-find-data-attr</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.style-chef {
background-color: #1a1a1a;
color: #ffffff;
padding: 0.2em;
width: 40%;
}
</style>
</head>
<body>
<main>
<ul>
<li data-esolang="Befunge">Befunge</li>
<li data-esolang="Chef">Chef</li>
<li data-esolang="Whitespace">Whitespace</li>
</ul>
</main>
<script>
$(document).ready(function() {
$("li").filter('[data-esolang="Chef"]').addClass('style-chef');
});
</script>
</body>
</html>
出力：
