children()仅选择第一个子元素。

Question

给定以下无序列表：

<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>

您能告诉我为什么以下代码只选择第一个列表项吗：

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());
        }
});

期望结果是选择所有列表项，控制台显示

<a href="index.html" class="current"><span class="displace">主页</span></a>

谢谢！

- Ragamffn

---

你确认了 li.parent() 是否按照你的预期执行了吗？另外，你为什么不直接使用 var items = $(this).closest('ul').children(); 呢？ - zkcro

Answer 1

html仅返回第一个选择的元素的html内容，你代码中的items是所选li元素的jQuery包装数组。http://jsfiddle.net/MKUGv/

- Ram

Answer 2

因为.html()不能遍历jQuery对象的每个元素并连接它们的HTML值。它只返回第一个元素的HTML值。

由于li是所有子元素，您需要自己循环遍历它们。例如：

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

- Chad

Answer 3

我认为这正是你所寻找的...（记录每个li的HTML）

http://jsfiddle.net/Z2Rhx/

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

- Smern

---

items 已经是一个 jQuery 对象，不需要再次包装。 - Chad