3

I need to run a function inside a conditional statement based on whether or not 3 elements have a class.

In short, if (elm1, elm2, elm3) have the class "include" then ring true. But all 3 elements must have the class, it can not ring true if only 2 or 1 has the class.

<div class="elm1" class="include"></div>
<div class="elm2" class="include"></div>
<div class="elm3" class="include"></div>

jQuery('#search-submit').click(function() { 
    if (#elm1, #elm2, #elm3).hasClass('include'){
        /* return true */
    } else {
        /* return false */
    }
}

Needless to say this doesn't work.

2
  • Are you interested in executing the "true section" only if all 3 <div> elements have the "include" class? Or do you only need at least 1? (If you need 3, I'm quite certain the answer you accepted is wrong, but by all means - validate this)
    – Amit
    Sep 8, 2015 at 10:57
  • @Amit : Yes your right I did select the wrong answer.
    – Alex Knopp
    Sep 9, 2015 at 10:14

5 Answers 5

2

You can do something like

<div class="elm1 include"></div>
<div class="elm2 include"></div>
<div class="elm3 include"></div>

 var classNotFound = false;
 $('.elm1, .elm2, .elm3').each(function() {
     if (!$(this).hasClass('include')){
        classNotFound = true;
     }
 });
 return classNotFound;
1

Your markup is not correct, put id="elm1" and not class="elm1" (for all three elements). Also there are some syntax error like
1. jQuery('#search-submit') - this block must ends with });
2. put your selector inside quotes , in your case if (#elm1, #elm2, #elm3)
3. if condition must be inside ()

You can have array of id of all elements and iterate it to know if element has class or not and set flag accordingly.

var elements = ['#elm1', '#elm2', '#elm3'];
jQuery('#search-submit').click(function() { 
    var result = true;
    //iterate all elements ids
    jQuery.each(elements, function(i, v){
       //set result false if element don't have class
       if(!jQuery(v).hasClass('include'))
          result = false;
    });
    //show final result
    alert(result);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="elm1" class="include"></div>
<div id="elm2" class="include"></div>
<div id="elm3" class="include"></div>

<input id="search-submit" type="button" value="Click me">

0

You have to correct your markup, since you can't have multiple identical attributes in a single element (As Jai noticed...):

<div class="elm1 include"></div>
<div class="elm2 include"></div>
<div class="elm3 include"></div>

Once you do, you can use a combined selector, and check your length:

jQuery('#search-submit').click(function() { 
    if (jQuery('.elm1.include, .elm2.include, .elm3.include').length == 3){
        /* return true */
    } else {
        /* return false */
    }
});
2
  • There is no id attributes.
    – Jai
    Sep 7, 2015 at 11:48
  • @AlexKnopp - if this answer helped you, I'd appreciate an upvote (so that at least it offsets the pointless downvote)
    – Amit
    Sep 9, 2015 at 20:52
0

Note you have used class attribute instead of id and so on for the rest:

<div class="elm1" class="include"></div>

Your JS code where I assume you tend to use id instead of class

if (#elm1, #elm2, #elm3)

Sample working code with ids:

$(function() {
  var inc = $('div.include[id^=elm]').length;
  var all = $('div[id^=elm]').length;
  alert(all === inc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="elm1" class="include"></div>
<div id="elm2" class="include"></div>
<div id="elm3" class="include"></div>

Sample working code with class:

$(function() {
  var inc = $('div.include[class^=elm]').length;
  var all = $('div[class^=elm]').length;
  alert(all === inc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="include elm1"></div>
<div class="include elm2"></div>
<div class="include elm3"></div>

1
  • That works until the OP has an element like <div class="elmtree"></div> anywhere in their document.
    – George
    Sep 7, 2015 at 11:55
0

Needless to say this doesnt work.

Surely!

Why:

Because of the multiple class attributes. If this happens then one is ignored, instead you can do this:

<div class="elm1 include"></div>
<div class="elm2 include"></div>
<div class="elm3 include"></div>

and in the js you have a selector with id which is not as per markup. My suggestion is to use .filter() method to filter out divs as per class you want to check and you can return it from .filter() then you can do your work as per your need.

So this can be done:

jQuery('#search-submit').click(function() {
  jQuery('div').filter(function(e, elem) {
    return !jQuery(this).hasClass('include');
  }).addClass('exclude');

  // just a demo:

  $('div').html(function(){
      this.innerHTML = '<pre>'+ this.classList +'</pre>'
  });
 
});
.include {
  color: green;
}
.exclude {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elm1 include">inclue</div>
<div class="elm2">!include</div>
<div class="elm3 include">include</div>
<br>
<button id="search-submit">Submit</button>

9
  • And you must pay attention to requirements: But all 3 elements must have the class. :-)
    – Amit
    Sep 7, 2015 at 11:52
  • That's ok, we're at a tie :-)
    – Amit
    Sep 7, 2015 at 11:55
  • That's still wrong, although almost like my answer, and yet you got the upvote... How is that? (You forgot to compare the length to 3)
    – Amit
    Sep 7, 2015 at 12:13
  • @Amit do you know what is 0 in js and what is other numbers other than negative numbers.
    – Jai
    Sep 7, 2015 at 12:26
  • @Amit 0 in js is interpreted as false and other positive values are true, so this is why there is no need to check for length to 3.
    – Jai
    Sep 7, 2015 at 12:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.