【jQuery】属性セレクタの前方・後方・部分一致【あいまい】

jQuery JavaScript

忘れやすいので備忘録。
jQueryセレクタで、前方一致・後方一致・部分一致の判定をする方法。

下記の例題は「class」でしてますが、「id」で判定したい場合は、
「class」となってる部分を「id」にすれば取得可能です。

前方一致

サンプルHTML

<ul>
  <li class="list-1">1番</li>
  <li class="list-2">2番</li>
  <li class="list-3">3番</li>
</ul>

前方一致のサンプル

$(function(){
    $("[class^='list-']").on("click",function(){
        console.log($(this).attr("class"));
    });
});

後方一致

サンプルHTML

<ul>
  <li class="one-sample">1番</li>
  <li class="two-sample">2番</li>
  <li class="three-sample">3番</li>
</ul>

後方一致のサンプル

$(function(){
    $("[class$='-sample']").on("click",function(){
        console.log($(this).attr("class"));
    });
});

部分一致

正直、あんまり使ったことないけど…w

サンプルHTML

<ul>
  <li class="one-ball-1">1番</li>
  <li class="two-ball-2">2番</li>
  <li class="three-ball-3">3番</li>
</ul>

部分一致のサンプル

$(function(){
    $("[class*='ball']").on("click",function(){
        console.log($(this).attr("class"));
    });
});
タイトルとURLをコピーしました