ここにnoobの質問があります。ステートメントの場合、チェック対象の要素に対して作用します
私の文書を調べて、p要素にクラスがあるかどうかを確認したいとしましょう。
if ($('p').hasClass('theClass')) {}
これは、すべてのp要素の確認に基づいてtrueまたはfalseを返します（または、それは最初の真の??を見つけた後、それが停止します）
、それはすべての要素をチェックした場合、あなたはそれを実行するために得ることができますすべての真の要素についての方法？
if ($('p').hasClass('theClass')) {
$(this).css('border','red');
}
.hasClass(className)：マッチした要素のいずれかが与えられたクラスが割り当てられているかどうかを確認。
だから、
、$（ 'P'）。hasClass（ 'するtheClass'） trueまたはfalseを返すとないクラスを持つすべての要素のリスト。 （「p.theClass」）を$をし、この意志はあなたがループを適用することができた上で必要なリストを返す：あなたがタグ名とクラス別の要素を選択する必要があり、このために
（ちょうどあなたの例を交換します） ：
$(function() {
var x = $('p').hasClass('theClass');
console.log("$('p').hasClass('theClass') returns: " + x);
console.log("$('p.theClass') returns a list of N. " + $('p.theClass').length + " elements");
//
// In case you need to loop:
//
$('p.theClass').each(function(index, element) {
$(element).css('color','red');
console.log(element.outerHTML);
// do other stuff....
});
//
// If you need only to set the color you may reduce all to one line
//
$('p.theClass').css('color','red');
});<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<p>1</p>
<p class="theClass">2</p>
<p>3</p>
<p class="theClass">4</p>
<p>5</p>
<p class="theClass">6</p>
<p>7</p>
<p class="theClass">8</p>
<p>9</p>はこれを試してみてください：
$(document).ready(function(){
$("p.theClass").css({border:"1px solid red"});
})
最終コード：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p class="theClass">I have theClass</p>
<p>I have not theClass</p>
<p class="theClass">I have theClass</p>
<p >I have not theClass</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p.theClass").css({border:"1px solid red"});
})
</script>
</body>
</html>だけで直接検索し、すべての要素にCSSを追加します。を私は以下の例のスニペットを書きました。
$('p.theClass').css({ border: '1px solid red' })
これはjquery.hasClassからのコードです。あなたが見ることができるように、それが見つかるたびに停止します。
function (selector) {
var className = " " + selector + " ",
i = 0,
l = this.length;
for (; i < l; i++) {
if (this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf(className) >= 0) {
return true;
}
}
return false;
}
方が良い、このようにそれを直接使用します。
<!DOCTYPE html>
<html>
<head></head>
<body>
<p class="theClass">red border</p>
<p>not border</p>
<p class="theClass">red border</p>
<p class="theClass">red border</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('p.theClass').css({ border: '1px solid red' })
})
</script>
</body>
</html>