[This can be deleted because I corrected an error of my own and this problem with IE is the same one I posted a comment about already. The only thing I would like to point out is that since the vast majority of people use IE still that the sample work should really work in IE first and foremost...(even if no one really likes IE).]
The exercise on manipulating attributes beginning on page 99 doesn't appear to work in IE7. I've tried purging my cache and have gone over the code in some detail to make sure it wasn't mistyped.
Here is what I have for reference anyway.
HTML:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="javascript/jquery-1.3.2.min.
js"></script>
<script type="text/javascript" src="javascript/EX4-2_tryout.
js"></script>
<link type="text/css" href="css/EX4-2_tryout.css" rel="stylesheet" />
</head>
<body>
<P>
Setting an attribute value with jQuery's attr() method is really easy, all you have to do is supply the name of the attribute and a value. [UNLESS YOU'RE USING IE]
</P>
<span class="tmpSetAttr">
The id attribute of this element is set to <i>tmpSetID</i>.
</span>
<P>
You can also set multiple attributes by supplying an object literal to the attr() method.
</P>
<span class="tmpSetMultipleAttr">
The title of this element is set to <i>Hello, World!</i> and the id attribute of this element is set to <i>tmpHellowWorld</i>.
</span>
<P>
Getting an attribute value is just as intuitive, all you need to do is call the attr() method with the name of the attribute you want to get the value for.
</P>
<span class="tmpGetAttr" title="Foo">
This element's title attribute has a value of <span></span>.
</span>
<P>
An attribute can be removed from an element using the removeAttr() method.
</P>
<span class="tmpRemoveAttr">
This element's class attribute is removed.
</span>
<ul>
<li>I</li>
<li>Me</li>
<li>Mine</li>
</ul>
</body>
</html>
CSS:
body {
font: 16px sans-serif;
}
span#tmpSetID {
background: yellow;
border: 1px dashed rgb(128,128,128);
padding: 3px;
}
span#tmpHelloWorld {
background: green;
padding: 3px;
border: 1px dashed yellowgreen;
color: yellowgreen;
}
span.tmpGetAttr {
background: blue;
padding: 3px;
border: 1px dashed lightblue;
color: lightblue;
}
span.tmpRemoveAttr {
background: red;
padding: 3px;
border: 1px dashed pink;
color: pink;
}
ul {
list-style: none;
padding: 0;
margin: 5px;
}
li#tmpI,
li#tmpMe,
li#tmpMine {
padding: 3px;
}
li#tmpI {
background: orange;
}
li#tmpMe {
background: purple;
}
li#tmpMine {
background: magenta;
}
JS:
$(document).ready(
function() {
$('span.tmpSetAttr').attr('id','tmpSetID');
$('span.tmpSetMultipleAttr').attr({
title: 'Hello, World!',
id: 'tmpHelloWorld'
});
$('span.tmpGetAttr').find('span').text(
$('span.tmpGetAttr').attr('title')
);
$('span.tmpRemoveAttr').removeAttr('class');
$('li').attr(
'id',
function() {
return 'tmp' + $(this).text();
}
);
}
);
EX 4-1 Try It Out
