jQuery セレクタに正規表現を使って部分一致で要素を指定する
環境
Google Chrome 105.0.5195.127
Windows 10 Home 64bit
jquery 3.6.1
構文
「属性 *= 属性名」
「*」を使って部分一致で要素を指定します。
書式
var 変数名 = $('li[id*="セレクター名"]’);
属性名idの中に指定文字列がどこかに入っている要素を抽出します。
使用例
<!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 = $('li[id*="name"]');
console.log(res[0]);
console.log(res[1]);
});
</script>
</head>
<body>
<ul>
<li id="citst">東京</li>
<li id="names">大阪</li>
<li id="cityB">福岡</li>
<li id="namest">横浜</li>
</ul>
</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 = $('li[id*="name"]');
console.log(res[0]);
console.log(res[1]);
});
</script>
</head>
<body>
<ul>
<li id="citst">東京</li>
<li id="names">大阪</li>
<li id="cityB">福岡</li>
<li id="namest">横浜</li>
</ul>
</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 = $('li[id*="name"]');
console.log(res[0]);
console.log(res[1]);
});
</script>
</head>
<body>
<ul>
<li id="citst">東京</li>
<li id="names">大阪</li>
<li id="cityB">福岡</li>
<li id="namest">横浜</li>
</ul>
</body>
</html>
実行結果
属性名の中に「name」という文字列がどこかに入っている要素をすべて抽出しています。
コンソールログに下記メッセージを出力します。
<li id="names">大阪</li>
<li id="namest">横浜</li>