jQuery中能否拼接$(this)选择器获取激活导航链接的href？

Question: #

我正在设计一个导航栏，使用"active"类修改其CSS样式并确定要展示的内容。我打算实现一个jQuery函数，获取激活的nav-link，通过$(this)选择器获取其文本（尤其是href链接地址）。请问能否将$(this)选择器与其他查询拼接来获取该href链接地址？

附导航栏代码：

<ul class="nav nav-pills flex-column" id="kid_list"> 
  <li class="nav-item"> 
    <a t-attf-href="/califications/{{active_kid.id}}" t-attf-class="nav-link active">
      <t t-esc="active_kid.name"/> 
      <span class="badge badge-pill float-right">25</span> 
    </a> 
  </li> 
  <!-- 更多li项 -->
</ul>

现有jQuery代码：

$(document).ready(function() { 
  "use strict"; 
  $('#kid_list > li > a').click(function(e) { 
    e.preventDefault(); 
    $('#kid_list > li > a').removeClass('active'); 
    $(this).addClass('active'); 
    /*Get the text data ...*/ 
    var url = $(this) 
  }); 
});

Answer: #

当然可以！你已经通过$(this)精准选中了被点击的<a>元素，直接调用jQuery的attr()方法就能获取它的href属性值，完全不需要额外拼接其他选择器。

修改后的完整代码如下：

$(document).ready(function() { 
  "use strict"; 
  $('#kid_list > li > a').click(function(e) { 
    e.preventDefault(); 
    // 移除所有a标签的active类（或者看下面的优化方案）
    $('#kid_list > li > a').removeClass('active'); 
    $(this).addClass('active'); 
    // 获取当前激活链接的href地址
    var url = $(this).attr('href');
    // 如果需要获取链接的文本内容（去掉徽章和多余空格）
    var linkText = $(this).contents().first().text().trim();
    // 或者如果要获取徽章里的数值，就可以用$(this)拼接查询
    var badgeCount = $(this).find('.badge').text();
    
    // 测试输出
    console.log('当前链接地址:', url);
    console.log('孩子姓名:', linkText);
    console.log('徽章数量:', badgeCount);
  }); 
});

关于$(this)与其他查询拼接的用法：

$(this)本身就是一个jQuery对象，你可以直接在它上面链式调用其他jQuery方法来做更精准的查询，比如：

• $(this).find('.badge')：查找当前<a>元素内部的.badge子元素
• $(this).parent()：获取当前<a>的父元素<li>
• $(this).siblings()：获取当前元素的同级元素（如果有的话）

这些都是“拼接查询”的典型场景，能帮你快速定位到关联元素。

小优化建议：

你可以把移除active类的逻辑优化得更高效，不用选中所有<a>标签，只针对当前点击元素的兄弟项操作：

// 移除当前li的其他兄弟li里的a标签的active类
$(this).parent().siblings().find('a').removeClass('active');

这样DOM操作的范围更小，性能更好。

内容的提问来源于stack exchange，提问作者arevilla009