JavaScript DHTML/jQuery/is
is() can be used inside an event handler.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").one("click", function () {
if ($(this).is(":first-child")) {
$("p").text(":first-child");
} else if ($(this).is(".blue,.red")) {
$("p").text("It"s a blue or red div.");
} else if ($(this).is(":contains("asdf")")) {
$("p").text("It"s asdf!");
} else {
$("p").html("It"s nothing <em>special</em>.");
}
});
});
</script>
<style>
div.middle { color: red; }
</style>
</head>
<body>
<body>
<div>asdf</div>
<div class="blue">asdf</div>
<div class="red">asdf</div>
<div><span>asdf</span>asdf</div>
<div class="blue">asdf</div>
<p>asdf</p>
</body>
</html>
is(expr)
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").one("click", function () {
if ($(this).is(":first-child")) {
$("p").text(":first-child");
} else if ($(this).is(".blue,.red")) {
$("p").text("It"s a blue or red div.");
} else if ($(this).is(":contains("asdf")")) {
$("p").text("It"s asdf!");
} else {
$("p").html("It"s nothing <em>special</em>.");
}
});
});
</script>
<style>
div.middle { color: red; }
</style>
</head>
<body>
<body>
<div>asdf</div>
<div class="blue">asdf</div>
<div class="red">asdf</div>
<div><span>asdf</span>asdf</div>
<div class="blue">asdf</div>
<p>asdf</p>
</body>
</html>
Is it class
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").one("click", function () {
if ($(this).is(".blue,.red")) {
$("p").text("It"s the blue and red div.");
}else{
$("p").text("It"s NOT the blue and red div.");
}
$("p").hide().slideDown("slow");
});
});
</script>
</head>
<body>
<body>
Press each to see the text.
<div class=blue>asdf</div>
<div class=red>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<p></p>
</body>
</html>
Traversing IS
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var isFormParent = $("input[type="checkbox"]").parent().is("form")
alert(isFormParent);
});
</script>
</head>
<body>
<body>
<form><input type="checkbox" /></form>
<div></div>
</body>
</html>