.equalTo() jQuery Plugin

.equalTo(object)

Description Returns boolean true if the wrapped set of elements is equal to object Download the ZIP File with Source and Demo

Parameters:

  • object: A jQuery object being compared with the current wrapped set of elements

Demos

The normal equality operators == and === do not properly evaluate the equality between jQuery objects. In this example, a div is given a class "box" and id "box1". This div is selected by jQuery by its class and by its id. Using the normal equality operators, the jQuery objects are determined to be unequal.
Click to toggle source code 
<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="equalto.jquery.js"></script>
<title>equalTo plugin</title>
<style type="text/css">
body{background-color: #FFFFFF;}
.box{width: 200px;height: 30px;border: 1px solid #000000;float: left;margin-left: 10px;text-align: center;}
button{float: left;margin: 10px 0px 0px 10px;clear: both;}
#result{float: left;margin-left: 10px;}
</style>
<script type="text/javascript">
$(function(){
  $("#evaluate").click(function(){
    if($("#box1") ===  $(".box"))
    {
      $("#result").html("#box = .box");
    }
    else
    {
      $("#result").html("#box does not = .box");
    }
  });
});
</script>  
</head> 
<body> 
  <div id="content">
  <div class="box" id="box1">id of #box, class of .box</div>
  </div>
  <button type="button" id="evaluate">Evaluate</button>
  <p id="result"></p>
</body> 
</html>
Using the .equalTo() method, however, properly evaluates that $("#box1") and $(".box") are the same.
Click to toggle source code 
<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="equalto.jquery.js"></script>
<title>equalTo plugin</title>
<style type="text/css">
body{background-color: #FFFFFF;}
.box{width: 200px;height: 30px;border: 1px solid #000000;float: left;margin-left: 10px;text-align: center;}
button{float: left;margin: 10px 0px 0px 10px;clear: both;}
#result{float: left;margin-left: 10px;}
</style>
<script type="text/javascript">
$(function(){
  $("#evaluate").click(function(){
    if($("#box1").equalTo(".box"))
    {
      $("#result").html("#box = .box");
    }
    else
    {
      $("#result").html("#box does not = .box");
    }
  });
});
</script>  
</head> 
<body> 
  <div id="content">
  <div class="box" id="box1">id of #box, class of .box</div>
  </div>
  <button type="button" id="evaluate">Evaluate</button>
  <p id="result"></p>
</body> 
</html>
August 12, 2010
About the Author:

Joseph is the lead developer of Vert Studios Follow Joseph on Twitter: @Joe_Query
Subscribe to the blog: RSS
Visit Joseph's site: joequery.me