javascript - 如何让 children 在jQuery中的i标签内

我在尝试让孩子进入i标记时遇到了麻烦，我尝试了很多方法并阅读了关于StackOverflow的许多问题，但仍然没有帮助。

这是我的代码：

function markAsRead() { //marked as read function
  console.log($(this).children(".gsdfs").text());
}

这是html：

<i class='fas fa-times' style='color: #FFCC00; cursor: pointer;margin-left: 87%; margin-top: -53px; position: absolute; ' onclick='markAsRead()'>
    <input type='hidden' value='123456787' class='notification_trackId'>
    <p style='color: transparent;' class='gsdfs'>Hello World</p>
</i>

这是输出：

最佳答案

您必须将this传递给函数，以便可以在函数内部引用该函数。

请注意：我更改了样式margin-top: -53px和color: transparent，以便该元素在代码段中可查看。

function markAsRead(el) { //marked as read function
  console.log($(el).children(".gsdfs").text());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class='fas fa-times' style='color: #FFCC00; cursor: pointer;margin-left: 87%; margin-top: 0px; position: absolute; ' onclick='markAsRead(this)'>
  <input type='hidden' value='123456787' class='notification_trackId'>
  <p style='color: black;' class='gsdfs'>Hello World</p>
</i>

如果类gsdfs的元素嵌套在其他元素内，则必须使用find()：

function markAsRead(el) { //marked as read function
  console.log($(el).find(".gsdfs").text());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class='fas fa-times' style='color: #FFCC00; cursor: pointer;margin-left: 87%; margin-top: 0px; position: absolute; ' onclick='markAsRead(this)'>
  <input type='hidden' value='123456787' class='notification_trackId'>
  <div>
    <p style='color: black;' class='gsdfs'>Hello World</p>
  </div>
</i>