Question

这里没有问题。

让我们说我想查看我的文档，看看p元素是否有类。

if ( $('p').hasClass('theClass') ) {}

它会在检查所有p元素时返回true或false（或者在找到第一个真元素后它会停止吗？）

如果检查所有元素，你可以让它对所有真元素执行一个方法吗？

if ( $('p').hasClass('theClass') ) {
  $(this).css('border','red');
}

Answer 1

只需直接查找并添加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;
}

您最好直接使用它：

＆＃13;

<!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>

＆＃13;

Answer 2

.hasClass( className )：确定是否为任何匹配的元素分配了给定的类。

所以， $（＆＃39; p＆＃39;）。hasClass（＆＃39; theClass＆＃39;） 返回true或false而不是列表所有具有该类的元素。

为此，您需要按标记名和类选择元素（只是为了替换您的示例）： $（＆＃39; p.theClass＆＃39;） 和这将返回您可以应用循环所需的列表：

＆＃13;

$(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');
});

＆＃13;

<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>

＆＃13;

Answer 3

试试这个：

$(document).ready(function(){

    $("p.theClass").css({border:"1px solid red"});

})

最终代码：

＆＃13;

<!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>

＆＃13;

如果声明，则对要检查的元素执行操作

3 个答案: