Pops wrote:
Thanks Klaus. I'm still learning. Maybe should show the light here.
I have a 7 year old Windows HELP TOC generator that creates an UL list
of about 500 links, its about 4 levels deep.
<ul>
<li><a ..></a><li>
<li><a ..></a><li>
<li><a ..></a><li>
<ul>
<li><a ..></a><li>
<li><a ..></a><li>
</ul>
<li><a ..></a><li>
<ul>
<li><a ..></a><li>
<li><a ..></a><li>
<ul>
<li><a ..></a><li>
<li><a ..></a><li>
</ul>
<li><a ..></a><li>
<li><a ..></a><li>
</ul>
...
</ul>
Is that reallly the HTML? If so, it is invalid and you cannot expect any
selector to be reliable in any browsers. I'm not refering to the missing
slashes in the closing tag - I assume you just left them out in the
example here -, but the incorrectly nested inner ul.
That should look like:
<ul>
<li><a ..></a></li>
<li><a ..></a></li>
<li>
<a ..></a>
<ul>
<li><a ..></a></li>
<li><a ..></a></li>
</ul>
</li>
<li><a ..></a><li>
...
So what would be the selectors here, for example to find the node that
has a child. I tried various selectors and can't quite get it.
For example, I think I want to find:
- the first LI of UL
- and any LI with a UL
There is where I could had a click to expand/collapse.
The first li of a ul is:
$('ul>li:first-child')
http://www.w3.org/TR/CSS21/selector.html#child-selectors
http://www.w3.org/TR/CSS21/selector.html#first-child
Any li with a ul (and that will probably only work with a valid DOM):
$('li:has(ul)') // jQuery 1.1.4+
$('li[ul]') // pre jQuery 1.1.4
Note that in this case there is no CSS selector at play. The former is
jQuery specific, the latter XPath, but deprecated in jQuery 1.1.4.
It is very useful to get familiar with CSS selectors to use jQuery even
more effectively:
http://www.w3.org/TR/CSS21/selector.html
http://www.w3.org/TR/2005/WD-css3-selectors-20051215/
HTH
--Klaus
