Question

我有一个 a 标记，如下所示：

npm install

我有一个函数，当您单击 a 标记时会被调用。如下-

<a href="data1.html" class="list-group-item" data-toggle="collapse"> 
   <i class="glyphicon glyphicon-folder-close"></i>Root Folder
</a>

我可以访问 a 标签的属性。示例：如果我想访问 a onclick的href，我可以通过event.target.href来获取。

我想访问 a 标记内的 i 标记的属性（例如， i 标记的类为“ glyphicon glyphicon-folder-close ”）。我该如何实现？

此外，我必须对函数进行哪些更改，以便仅当class =“ list-group-item ”的 a 标记被调用时才调用该函数点击了吗？

先谢谢了。

Answer 1

您可以这样重写函数：

$(document).ready(function() {
   //Only use list-group-item
   $("a.list-group-item").hover(function(event) {
     var $attrNode = $(this).find("i");
     //Now that you have the list group item it is easy to get the attribute
     var attributeValue = $attrNode.attr("your-attribute");

     //You can also set the attribute
     $attrNode.attr("your-attribute", "attribute value");
   });
});

Answer 2

我想访问i标记内的a标记的属性

在任何jQuery事件处理程序中，this均指在其上触发事件的元素：因此，您可以使用相对于该元素的任何选择器。例如，$(this).children('i')会根据您的HTML找到包含的i；如果该元素可能嵌套得更深，则您希望使用.find()而不是.children()。

我必须对该函数进行哪些更改，以便仅当class =“ list-group-item”的标记时才调用该函数

更改用于附加处理程序的选择器-$("a.list-group-item")而非$("a")，以将其限制为具有该类的项目。

还请注意，如果您希望按描述的那样在单击时起作用，而不是如示例代码中那样悬停，则需要从事件处理程序中返回false（这样就不会发生常规链接导航）。

$(document).ready(function(e) {
  $("a.list-group-item").click(function() {
    var myChild = $(this).children('i')
    
    console.log(myChild.attr("class")); // for example
    return false; // prevent regular navigation from occurring on click
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://example.com" class="list-group-item">
  <i class="glyphicon glyphicon-folder-close"></i> Will fire handler on click
</a>
<br>
<a href="https://example.com">
  <i class="glyphicon glyphicon-folder-close"></i> Will navigate normally
</a>

Answer 3

由于您使用的是jQuery，因此非常简单！

$(document).ready(function() {
    $("a.list-group-item").click(function(event) {
        $(this).find('i').attr('class');
    });
});

要仅获取某些锚标记，可以使用选择器，请详细了解它们here。然后，您可以使用此对象查找子代。在jQuery中使用find方法。最后，使用attr来检索该类。

访问标签内标签的属性

3 个答案: