children() only selecting first child

Question

Given the following unordered list:

<ul class="nb">
    <li class="home"><a href="index.html" class="current"><span class="displace">Home</span></a></li>
    <li class="products"><a href="products.html" title="Products"><span class="displace">Products</span></a></li>
    <li class="services"><a href="services.html" title="Services"><span class="displace">Services</span></a></li>
    <li class="support"><a href="support.html" title="Support"><span class="displace">Support</span></a></li>
    <li class="company"><a href="company.html" title="Company"><span class="displace">Company</span></a></li>
    <li class="contact"><a href="contact.html" title="Contact"><span class="displace">Contact</span></a></li>
</ul>

Can you tell me why the following only selects the first list item:

var status = 'closed';
$('ul.nb li a').click(function(e){
    e.preventDefault();
        if ($status == 'closed'){
            var li = $(this).closest('li');
            var items = li.parent().children();
            console.log(items.html());
        }
});

Expected results are a selection of all list items, console shows <a href="index.html" class="current"><span class="displace">Home</span></a>

TIA

Answer 1

html as getter only returns html content of the first selected element, items in your code is a jQuery wrapped array of all the selected li elements. http://jsfiddle.net/MKUGv/