jQuery получить идентификатор ближайшего li

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>

При нажатии на значок мне нужно получить идентификатор родителя <li>.

Я использую следующий прослушиватель кликов:

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

Это будет вернуть «Текст».

Используя

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

, я просто возвращаю идентификатор первой записи <li>. Так что, похоже, «это» указывает на <ul>.

Answer 1

У вас есть две проблемы здесь. Во-первых, вы не используете click() правильно. Первый аргумент в вашем случае - это дополнительные данные, которые вы хотите включить в событие, но это не относится к вашему варианту использования. Вместо этого кажется, что вы пытаетесь создать делегированный обработчик событий, но для этого вам нужно использовать 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>

Answer 2

К вашему сведению, если вы используете фрагмент, нам будет проще запустить его и посмотреть, что происходит. Ниже во фрагменте я переключил его с добавления слушателя в ul. теперь он добавляет слушателя в список вложенных внутри вашего ul.

//#sortable is the id of the ul
//.editor-sortable-movable grabs the li
$(document).ready(function () {
  $("#sortable > li").on("click",function(e) {
    console.log($(this).attr('id'));
  });
});

.editor-sortable-moveable {
  background-color: yellow;
}
.editor-sortable-moveable:hover {
  background-color: red;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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>
<li class="ui-state-default editor-sortable-moveable" id="456">
  <div class="d-flex">
    <div class="p-2 flex-fill li-content-grid"></div>
    <div class="p-2 flex-fill li-content-grid">Next</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>