Selecting 1st level children only
Given the following markup
<div id="menu">
<ul>
<li><a id="home" href="#">Home</a></li>
<li>
<a id="about" href="#">About</a>
<div>
about sub menu
</div>
</li>
<li>
<a id="products" href="#">Products</a>
<div>
<h2>Books</h2>
<ul>
<li>ColdFusion</li>
<li>jQuery</li>
<li>CSS</li>
<li>HTML</li>
<li>Groovy</li>
<li>Hibernate</li>
</ul>
</div>
</li>
<li>
<a id="service" href="#">Service</a>
<div>
service
</div>
</li>
<li><a id="support" href="#">Support</a></li>
<li><a id="contact" href="#">Contact Us</a></li>
</ul>
</div>
How can I grab only the 1st level children of my node? I want direct decendents of menu only. My code below is grabbing all <li> which is going to be a problem.
(function($){
$.fn.extend({
myplugin: function(options){
return this.each(function(){
// the object we are working with
var obj = $(this);
// get a list of menu items
var menuItems = $('li',obj);
});
}
});
})(jQuery);