jQuery findメソッドを使って特定の子要素を取得する方法
環境
Google Chrome 105.0.5195.127
Windows 10 Home 64bit
jquery 3.6.1
構文
$('セレクター’).find(目的要素);
findメソッドを使って特定の子要素を取得します。
使用例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var res= $('#cft').find('a');
console.log( res[0] );
});
</script>
</head>
<body>
<div id="cft">
<p>tokyo</p>
<div>
<a href="https://arkgame.com/">arkgame</a>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var res= $('#cft').find('a');
console.log( res[0] );
});
</script>
</head>
<body>
<div id="cft">
<p>tokyo</p>
<div>
<a href="https://arkgame.com/">arkgame</a>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var res= $('#cft').find('a');
console.log( res[0] );
});
</script>
</head>
<body>
<div id="cft">
<p>tokyo</p>
<div>
<a href="https://arkgame.com/">arkgame</a>
</div>
</div>
</body>
</html>
実行結果
div要素「cft」を対象してfind('a’)と記述することで階層下のaタグを取得します。
<a href="https://arkgame.com/">arkgame</a>