使用最近的/ prev /过滤器获取类属性

问题描述

当我单击<i>子类别元素时，如何获得<a>元素的类属性？

我尝试过：

$(el).filter("i").attr("class")
$(el).closest("i").attr("class")

<ul class="dropdown">
  <li class="dropdown-submenu">
    <i class="fas fa-tools color-1 text-center mr-1"></i>
    <a href="#!" class="list-group-item">Category A</a>
      <ul class="dropdown">
          <li>
            <a href="#!" class="list-group-item">Subcategory1</a>
          </li>
          <li>
            <a href="#!" class="list-group-item">Subcategory2</a>
          </li>
          <li>
            <a href="#!" class="list-group-item">Subcategory3</a>
          </li>
      </ul>
  </li>
</ul>

解决方法

.filter()方法会限制每个提供的选择器的当前集合。没有i个元素是a个元素的同级元素。

将匹配元素的集合减少为与选择器匹配或通过功能测试的元素。

.closest()方法根据提供的选择器搜索元素的祖先。唯一的i元素不是任何a元素的祖先。但是，您可以向上遍历i元素的父级/祖先，然后按照@FelixKling的建议向下遍历：

$('a').on('click',function() {
    console.log( $(this).closest("li[class]").find("i[class]").attr("class") );
});

演示

$('a').on('click',function() {
    //$(this).filter("i").attr("class")
    console.log( $(this).closest("li[class]").find("i[class]").attr("class") );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="dropdown">
  <li class="dropdown-submenu">
    <i class="fas fa-tools color-1 text-center mr-1"></i>
    <a href="#!" class="list-group-item">Category A</a>
      <ul class="dropdown">
          <li>
            <a href="#!" class="list-group-item">Subcategory1</a>
          </li>
          <li>
            <a href="#!" class="list-group-item">Subcategory2</a>
          </li>
          <li>
            <a href="#!" class="list-group-item">Subcategory3</a>
          </li>
      </ul>
  </li>
</ul>

closest jquery