jQuery でクラスを取得する
このチュートリアルでは、jQuery でクラス名を取得する方法を示します。
jQuery でクラスを取得する
attr() メソッドは、jQuery でクラス名を取得できます。このメソッドに加えて、hasClass() メソッドを使用して、特定の要素に特定のクラス名があるかどうかを確認できます。
両方の方法の例を説明して示しましょう。
attr() メソッドは、HTML 要素属性の値を取得するために使用されます。attr() メソッドのクラス名をパラメーターとして使用して、クラスの名前を取得できます。
attr メソッドを使用してクラス名を取得するための構文は次のとおりです。
attr('class')
この方法の例を試してみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Class Name</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var Name = $("#DELFTSTACK").attr("class");
alert(Name);
});
});
</script>
</head>
<body>
<div id="DELFTSTACK" class="Delfstack">Click the button to get the class name for this element.</div>
<button type="button">Click Here</button>
</body>
</html>
上記のコードは、指定された要素のクラス名を警告します。出力を参照してください：
クラスが attr() メソッドから取得した名前を持っているかどうかを確認しましょう。この目的のために、hasClass() メソッドを使用できます。
例を参照してください：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Class Name</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var Name = $("#DELFTSTACK").attr("class");
if ($( "#DELFTSTACK" ).hasClass( Name )){
alert(Name);
}
});
});
</script>
</head>
<body>
<div id="DELFTSTACK" class="Delfstack">Click the button to get the class name for this element.</div>
<button type="button">Click Here</button>
</body>
</html>
attr メソッドは正しいクラス名を返し、hasClass は true を返すため、上記のコードでも同様の出力が得られます。出力を参照してください：
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook