[jQuery] Selector befuddlement
This is a snippet of a list containing another list:
<ol id="ol1" class="ol1">
<li>QUESTION TEXT IS HERE
<input type=hidden name="Q1" value=443>
<input type=hidden name="C1" value=1>
<input type=hidden name="R1" value=3>
<ul class="ul2">
<li><input type=radio id="idA1-10" name="A1" value=1><label
for="idA1-10">CHOICE 1</label></li>
<li><input type=radio id="idA1-41" name="A1" value=4><label
for="idA1-41">CHOICE 2</label></li>
</ul>
</li>
The parent list is a list of 10 or more questions. Each #ol1 list
element contains a question, and another list ul.ul2 which contains
choices.
I want to assign .hover() handlers to both the outer and inner list
elements...
$('ol#ol1 > li').hover(ol1liOver, ol1liOff); // Works well for the
outer elements
$('ul.ul2 > li').hover(ul2liOver, ul2liOff); // Doesn't work for the
inner elements. Why not?
$('ul.ul2 li').hover(ul2liOver, ul2liOff); // Will work.
$('ul.ul2/li').hover(ul2liOver, ul2liOff); // Doesn't work. Why not?
Here's what I get from the selector rules:
E F an F element descendant of an E element
-- F can appear at any level below E. Similar to $('E').find('F');
E > F an F element child of an E element
- -- F must be a direct descendent of E.
E + F an F element immediately preceded by an E element
-- F immediately follows E as a sibling
E ~ F an F element preceded by an E element
-- F is a sibling of E
Sam