.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>
Related Posts:
About the Author:
