a simple but common issue:
"When I click or mouseover an element, I want something to happen to its parent, how do I do that?"
first a single short jQuery example:
(on page load: add: onclick of any 'img' element, hide the entire parent)
$().ready(function(){
$('img').click(function(){
$(this).parent().hide();
});
});
lets look at some other common issues, adding a bit more functionality and freedom to get what you want:
(showing different examples of manipulating parents and sister elements, with your own changes this should cover most of what you want)
----------
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$().ready(function(){
// add some borders to see clearly what the HTML-tree is like:
$('div').css('margin','5px');
$('div').css('border','1px dashed red');
// when the page loads, add a mouseover event on all IMGs with class hoverclass:
$('img.hoverclass').hover(
// onmouseover do this:
function(){
// example of direct javascript and jQuery manipulators:
this.parentNode.style.backgroundColor='#f00'; // using normal javascript
$(this).parent().css('color','#0f0'); // using jQuery
// changing a 'sister' element (an element with the same parent):
$(this).parent().find('div.sister').css('backgroundColor','#888');
$(this).parent().find('div.sister').css('color','#fff');
}
,
// onmouseout do this:
function(){
// 'inherit' means: use the same setting its parent element has for that style property
// alternatively you could put an empty string '' for the same result
// (or for example to turn it black again use '#000')
this.parentNode.style.backgroundColor='inherit'; // using normal javascript
$(this).parent().css('color','inherit'); // using jQuery
// changing a 'sister' elements back:
$(this).parent().find('div.sister').css('backgroundColor','');
$(this).parent().find('div.sister').css('color','');
}
);
});
</script>
</head>
<body>
body
<div>
div1 parentelement
<img class="hoverclass"/>
</div>
<div>
div2 parentelement
<img class="hoverclass"/>
</div>
<div>
div3 parentelement
<img class="hoverclass"/>
<div class="sister" > div1 "sister" element </div>
<div class="brother"> div2 "brother" element </div>
</div>
<div>
div4 parentelement
<img class="hoverclass"/>
<div class="sister" > div3 "sister" element </div>
<div class="brother"> div4 "brother" element </div>
</div>
</body>
</html>
----------
Note how it is possible to mix (normal) javascript with jQuery.
The javascript keywords you want are: "this" and "parentNode"
in this example "this" refers to the object that fires the event (the IMG that gets a mouseover), and "this.parentNode" gets the direct parent , in this case the DIV around it.
You can use "this.parentNode.parentNode" if you want to get the parent of the parent, etc.
Ofcourse, you can still use jQuery aswell, exchanging "this.parentNode" for "$(this).parent()" , and then use that jQuery selection to work on with regular jQuery manipulators ( like .hide() or .css() ).
----------
more info on events: (adding "onEvent" handlers, or even firing them)
(examples of events above: the .click() and .hover() functions)
more info on element-selectors:
(like above: $('img.classname') or .find('div.sister'))
more info on traversing the html tree:
(like the .parent() and .find() functions above )
more info on manipulators: (function to manipulate a jQuery selection of elements)
(like .hide() and .css() above)
----------
(note to forum masters: not quite sure if this is the right place to put this, but couldn't find a better place =/ using this spot as a reference to point people to when they ask a similar question)