jQuery: データ属性を持つ要素を検索
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>
出力：
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn