CODEWITHSUNDEEP
jquery
Sony ThePony
Sony ThePony

Reputation: 311

If statement, act on the element being checked

noob question here.

Let's say I want to check through my document and see if a p element has a class.

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

It will return true or false based on checking all p elements (or will it stop after it finds the first true??)

If it checks all elements, can you get it to execute a method on all true elements?

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

Upvotes: 3

Views: 31

Answers (3)

gaetanoM
gaetanoM

Reputation: 42044

.hasClass( className ): Determine whether any of the matched elements are assigned the given class.

So, $('p').hasClass('theClass') returns true or false and not the list of all element having the class.

For this you need to select elements by tagname and class (just to replace your example): $('p.theClass') and this will returns the list you need on which you can apply a loop:

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

Upvotes: 0

Inanc Gumus
Inanc Gumus

Reputation: 27889

Just directly find and add css to all elements: I wrote an example snippet below.

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

This is the code from jquery.hasClass. As you can see, it stops whenever it finds it.

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

You better use it directly like this:

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

Upvotes: 1

Ehsan
Ehsan

Reputation: 12959

Try this :

$(document).ready(function(){

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

})

Final code :

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

Upvotes: 0

Related Questions