Release:jQuery 1.2/Traversing
From jQuery JavaScript Library
« Back to the full jQuery 1.2 Release Notes.
Contents |
[edit]
.map()
Translate a set of elements into another set of values (which may, or may not, be elements).
You could use this to build lists of values, attributes, css values - or even perform special, custom, selector transformations.
This is provided as a convenience method for using $.map().
Build a list of all the values within a form.
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
});
</script>
</head>
<body>
<p><b>Values: </b></p>
<form>
<input type="text" name="name" value="John"/>
<input type="text" name="password" value="password"/>
<input type="text" name="url" value="http://ejohn.org/"/>
</form>
</body>
</html>
[edit]
.prevAll() / .nextAll()
Allows you to find all sibling elements before, or after, the current element.
Locate all the divs after the first and give them a class.
$("div:first").nextAll().addClass("after");
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div:first").nextAll().addClass("after");
});
</script>
<style>div{ width: 80px; height: 80px; background: #abc; position: relative; border: 2px solid black; margin: 0 20px; float: left; }
div.after { border-color: red; }</style>
</head>
<body>
<div></div><div></div><div></div><div></div>
</body>
</html>
Locate all the divs before the last and give them a class.
$("div:last").prevAll().addClass("before");
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div:last").prevAll().addClass("before");
});
</script>
<style>div{ width: 80px; height: 80px; background: #abc; position: relative; border: 2px solid black; margin: 0 20px; float: left; }
div.before { border-color: red; }</style>
</head>
<body>
<div></div><div></div><div></div><div></div>
</body>
</html>
[edit]
.slice()
This method behaves just like an array's native .slice() method, allowing you to cut up the jQuery set into reusable portions.
Selects all paragraphs, then slices the selection to include only the first element.
$("p").slice(0, 1).wrapInner("<b></b>");
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").slice(0, 1).wrapInner("<b></b>");
});
</script>
</head>
<body>
<p>Hello</p><p>cruel</p><p>World</p>
</body>
</html>
[edit]
.hasClass()
The new .hasClass() method is a simple convenience method that sits on top of .is(), handling its most common use case (checking for a class name). It can be used like so:
Check to see if an element has a specific class, and if so, perform an action.
$("div").click(function(){
if ( $(this).hasClass("protected") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div").click(function(){
if ( $(this).hasClass("protected") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
});
});
</script>
<style>div{ width: 80px; height: 80px; background: #abc; position: relative; border: 2px solid black; margin: 0 20px; float: left; }
div.protected { border-color: red; }</style>
</head>
<body>
<div class="protected"></div><div></div>
</body>
</html>
[edit]
.andSelf()
Combine the two previous sets on the jQuery stack into a single matched set.
Find all divs, and all the paragraphs inside of them, and give them both classnames.
$("div").find("p").andSelf().addClass("border");
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div").find("p").andSelf().addClass("border");
});
</script>
<style>div{ padding: 5px; } .border { border: 2px solid black; }</style>
</head>
<body>
<div><p>First Paragraph</p><p>Second Paragraph</p></div>
</body>
</html>
[edit]
.contents()
Find all the child nodes inside the matched elements (this included text nodes).
Find all the text nodes inside a paragraph and wrap them with a bold tag.
$("p").contents().not("[@nodeType=1]").wrap("<b/>");
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").contents().not("[@nodeType=1]").wrap("<b/>");
});
</script>
</head>
<body>
<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
</body>
</html>
If you perform it against an iframe element, it returns its inner document.
Append some new content into an empty iframe.
$("iframe").contents().find("body")
.append("I'm in an iframe!");
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("iframe").contents().find("body")
.append("I'm in an iframe!");
});
</script>
</head>
<body>
<iframe src="/index-blank.html" width="300" height="100"></iframe>
</body>
</html>