jquery - Get class attribute using closest /prev/ filter

Question

How can i get class attribute of <i> element when i click on <a> Subcategory elements ?

I have tried :

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

标签： jqueryclosest

Answer 1

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