孩子们（）只选择第一个孩子

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/

Answer 2

Because .html() doesn't go through each element of the jQuery object and concat all their html values. It only returns the first one's html value.

Since li is all the children, you will have to loop through them on your own. Something like:

var html = '';
items.each(function(i, elm) {
    html += $(elm).html();
});

Answer 3

I think this is what you are looking for... (logging the html for each li)

http://jsfiddle.net/Z2Rhx/

$(items).each(function() { console.log($(this).html()) });