【保存版】jQueryでhref属性値を取得する方法を徹底解説！サンプルコード付き
2024-05-26
jQuery で href 属性値を取得する方法
このチュートリアルでは、jQuery を使って HTML の <a> タグの href 属性値を取得する方法を説明します。
方法
href 属性値を取得するには、以下のいずれかの方法を使用できます。
attr() メソッドを使う
最も一般的な方法は、attr() メソッドを使用する方法です。このメソッドは、要素から属性値を取得するために使用されます。
var href = $('a').attr('href');
console.log(href); // http://example.com
上記のコードは、すべての <a> タグの href 属性値を取得し、コンソールにログ出力します。
特定の <a> タグの href 属性値を取得するには、セレクターを使用します。
var href = $('#myLink').attr('href');
console.log(href); // http://example.com/about
var href = $('a').prop('href');
console.log(href); // http://example.com
直接アクセスする
最後の方法は、直接アクセスする方法です。この方法は、パフォーマンスが優れている場合がありますが、コードが読みづらくなる可能性があります。
var href = $('a')[0].href;
console.log(href); // http://example.com
上記のように、jQuery を使って href 属性値を取得するには、いくつかの方法があります。どの方法を使用するかは、状況によって異なります。
補足
- 上記のコードは、基本的な例です。実際の状況では、より複雑なセレクターや処理が必要になる場合があります。
- jQuery の最新バージョンを使用していることを確認してください。
<!DOCTYPE html>
<html>
<head>
<title>jQuery で href 属性値を取得する</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="http://example.com">リンク 1</a>
<a href="http://example.com/about">リンク 2</a>
<a href="http://example.com/contact">リンク 3</a>
<script>
$(document).ready(function(){
var hrefs = $('a').attr('href');
console.log(hrefs);
});
</script>
</body>
</html>
実行結果:
https://example.com/, https://en.wikipedia.org/wiki/Example.com, https://www.examples.com/contact
<!DOCTYPE html>
<html>
<head>
<title>jQuery で href 属性値を取得する</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="http://example.com">リンク 1</a>
<a href="http://example.com/about">リンク 2</a>
<a href="http://example.com/contact">リンク 3</a>
<script>
$(document).ready(function(){
var hrefs = $('a').prop('href');
console.log(hrefs);
});
</script>
</body>
</html>
https://example.com/, https://en.wikipedia.org/wiki/Example.com, https://www.examples.com/contact
<!DOCTYPE html>
<html>
<head>
<title>jQuery で href 属性値を取得する</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="http://example.com">リンク 1</a>
<a href="http://example.com/about">リンク 2</a>
<a href="http://example.com/contact">リンク 3</a>
<script>
$(document).ready(function(){
var href = $('a')[0].href;
console.log(href);
});
</script>
</body>
</html>
https://example.com/
説明
上記のコードは、それぞれ異なる方法で href 属性値を取得しています。
この方法は、最も一般的な方法です。attr() メソッドは、要素から属性値を取得するために使用されます。
jQuery で href 属性値を取得するその他の方法
特定の条件に合致する <a> タグのみの href 属性値を取得したい場合は、filter() メソッドを使用できます。
<!DOCTYPE html>
<html>
<head>
<title>jQuery で href 属性値を取得する</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="http://example.com">リンク 1</a>
<a href="http://example.com/about">リンク 2</a>
<a href="http://example.com/contact">リンク 3</a>
<script>
$(document).ready(function(){
var hrefs = $('a').filter(function(){
return $(this).attr('href').indexOf('/about') !== -1;
}).attr('href');
console.log(hrefs);
});
</script>
</body>
</html>
ループ処理を使って、個々の <a> タグの href 属性値を取得することもできます。
<!DOCTYPE html>
<html>
<head>
<title>jQuery で href 属性値を取得する</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="http://example.com">リンク 1</a>
<a href="http://example.com/about">リンク 2</a>
<a href="http://example.com/contact">リンク 3</a>
<script>
$(document).ready(function(){
$('a').each(function(){
var href = $(this).attr('href');
console.log(href);
});
});
</script>
</body>
</html>
map() メソッドを使って、href 属性値の配列を取得することもできます。
<!DOCTYPE html>
<html>
<head>
<title>jQuery で href 属性値を取得する</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="http://example.com">リンク 1</a>
<a href="http://example.com/about">リンク 2</a>
<a href="http://example.com/contact">リンク 3</a>
<script>
$(document).ready(function(){
var hrefs = $('a').map(function(){
return $(this).attr('href');
}).get();
console.log(hrefs);
});
</script>
</body>
</html>
javascript jquery
