jquery - 使用find方法从每个li中获取href属性值

Question

我有一个导航菜单，想从每个菜单中获取href属性li a

jQuery代码

$('#navbar ul li').each(function(){
     console.log($('a').attr('href'));
});

菜单的 HTML 代码

<div id="navbar">
<ul class="sf-menu sf-js-enabled" id="navmain">
<li><a href="/index.php">HOME</a></li>
<li><a href="/shop/sales/">SALES</a></li>
<li><a href="/shop/clothing/">CLOTHING</a></li>
<li><a href="/shop/accessories/">ACCESSORIES</a></li>
<li><a href="/cart.php">CART</a></li>
<li><a href="/wishlist.php">WISHLIST</a></li>
<li><a href="/contactus.php">CONTACT US</a></li>
<li><a href="/aboutus.php">ABOUT US</a></li>
</ul>
</div>

Answer 1

$('#navbar > ul > li').each(function () {
    console.log($(this).children('a').attr('href'));
});

或者

$('#navbar > ul > li > a').each(function () {
    console.log(this.href);
});

但为了简单起见，我会这样做：

$('#navbar a').each(function () {
    console.log(this.href);
});

请注意，最后一个适用于 中的所有链接#navbar，而不仅仅是 中的无序列表中的列表项中的链接#navbar。

Answer 2

$('#navbar ul li a').each(function(){
    console.log($(this).attr('href'));
});

---

顺便说一句，你确定你需要那个复杂的选择器吗？这还不够吗？

$('#navbar a').each(function () {
    console.log( this.getAttribute('href') );
});