javascript - jQuery 获取最近的 li 的 id

Question

<ul id="sortable">

  <li class="ui-state-default editor-sortable-moveable" id="123">
  <div class="d-flex">
    <div class="p-2 flex-fill li-content-grid"></div>
    <div class="p-2 flex-fill li-content-grid">Text</div>
    <div class="p-2 flex-fill li-content-grid icon-flow"><i class="fas fa-edit" id="editor_click_icon_edit"></i></div>
  </div>
  </li>

</ul>

点击图标时，我需要获取父级的id <li> .

我正在使用以下点击监听器:

$("#sortable").click("#editor_click_icon_edit",function(e) {
  console.log($(this).text());
});

这将返回“文本”。

通过使用

$(this).children().attr('id');

我只是返回第一个<li>的id入口。所以看起来“this”指向 <ul> .

Answer 1

您这里有两个问题。首先，您没有正确使用 click() 。您的案例中的第一个参数是您想要在事件中包含的附加数据，但这与您的用例无关。相反，您似乎正在尝试创建委托(delegate)事件处理程序，但您需要为此使用 on() 。

其次，您需要遍历 DOM 以从单击的元素中找到父级 li。 closest() 将为您实现这一目标。

$("#sortable").on('click', "#editor_click_icon_edit", function(e) {
  console.log($(this).closest('li').prop('id'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js"></script>
<ul id="sortable">
  <li class="ui-state-default editor-sortable-moveable" id="123">
    <div class="d-flex">
      <div class="p-2 flex-fill li-content-grid"></div>
      <div class="p-2 flex-fill li-content-grid">Text</div>
      <div class="p-2 flex-fill li-content-grid icon-flow">
        <i class="fas fa-edit" id="editor_click_icon_edit"></i>
      </div>
    </div>
  </li>
</ul>