web-dev-qa-db-ja.com

jqueryを使用して特定の文字列でクラスの開始と終了を持つ要素を選択する方法は？

私は次のようなクラスを使用していくつかのdivを取得しました

  • .wrap-1-addon-1
  • .wrap-2-addon-1
  • .wrap-3-addon-1

それらすべてを選択し、if ( $(this).hasClass() )を使用してそれらの1つであるかどうかを確認したいと思います。現在、私は単一のクラスのみをチェックしています。 .hasClass('wrap-*-addon-1')など、これらすべてを確認するにはどうすればよいですか？

宜しくお願いします。

javascripthtmlclass-attributesjquery
16
Marian Rick

2つのjquery Attribute Starts With Selector _[name^=”value”]_ と Attribute Ends With Selector _[name$=”value”]_ を組み合わせてこの作業を行うことができます。

_$('div[class^="wrap-"][class$="-addon-1"]')
_
$('div[class^="wrap-"][class$="-addon-1"]').css("color", "red");
_<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-1-addon-1">wrap-1-addon-1</div>
<div class="wrap-2-addon-1">wrap-2-addon-1</div>
<div class="wrap-3-addon-1">wrap-3-addon-1</div>
<div class="wrap-3-addon-2">wrap-3-addon-2</div>_
16
Mohammad

複数のクラスをサポートする.is()を使用できますが、残念ながら.hasClass()は一度に1つのクラスでのみ機能します。

例：

element.is('.wrap-1-addon-1, .wrap-2-addon-1, .wrap-2-addon-1')
4
Radex

セレクターで始まる を使用できます：

$('div[class^="wrap"]')

JsFiddleデモ

4
urbz

別のクラスを追加して、このクラスで選択することをお勧めします。その後、正規表現でテストできます。

$el = $(".wrap");

$el.each(function() {
  var test = /wrap-[1-3]-addon-1/.test($(this).attr("class"));
  $(".result").html(test);
  console.log(test);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-1-addon-1 wrap"></div>
<div class="wrap-2-addon-1 wrap"></div>
<div class="wrap-3-addon-1 wrap"></div>
  
<div class="result"></div>
3
izzet altinel

これはあなたを助けるかもしれません、私は現在の要素のクラスが望ましいパターンに合うかどうかを解決するために正規表現を使用しました。

チェックするクラスが3つ以上あると思います。このパターンは、wrap-1-addon-1からwrap-n-addon-1までのパターンで、nは数字です。

function hasMyClass(Elm) {
  
var regex = /(wrap-)+(\d)+(-addon-1)/i;// this is the regex pattenr for wrap-*-addon-1
  
var $this = $(Elm);
var myClassesStr = $this.attr('class');
if(myClassesStr) { // if this has any class
  var myClasses = myClassesStr.split(' '); // split the classes
  for(i=0;i<myClasses.length;i++) { // foreach class
      var myClass = myClasses[i]; // take one of classes
      var found = myClass.match(regex); // check if regex matches the class
    
      if(found) {
          return true;
        }
    }
}
  
return false;
}



function test() {
    $('#container div').each(function(){
      var $this = $(this);
      $('#pTest').append('<br/>test result for ' + $this.attr('id') + ':' + hasMyClass(this)); 
      // hasMyClass(this) is the sample usage
    })
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="div1" class="wrap-1-addon-1 anotherClass">div1 (wrap-1-addon-1)</div>
  <div id="div2"  class="wrap-2-addon-1 anotherClass anotherClass2">div2 (wrap-2-addon-1)</div>
  <div id="div3"  class="wrap-3-addon-1 anotherClass">div3 (wrap-3-addon-1)</div>
  <div id="div4"  class="anotherClass">div4 (none)</div>
</div>
<button id="testBtn" onclick="test();" type="button">TEST</button>

<p id="pTest" >...</p>
2
er-han

これからの刺激的な正規表現マッチング answer ：

var $ele = $("div:first");

alert(matchRule($ele.attr('class'),'wrap-*-addon-1'))


function matchRule(str, rule) {
  return new RegExp("^" + rule.split("*").join(".*") + "$").test(str);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="wrap-1-addon-1">
</div>
<div class="wrap-2-addon-1">
</div>
<div class="wrap-3-addon-1">
</div>
2
Developer