Похоже, не удается получить идентификатор родителя div, вложенного в тег LI

#javascript #html #jquery

Вопрос:

Чего я пытаюсь добиться, так это получить идентификатор div текущего li всякий раз, когда изменяется значение «Число»

 <ul>
<li>
 <div id ="id1"class="card center">
 <span class="red-text">First Number </span><b class="" 
 contenteditable="true" oninput="edit(this)">Number</b><br>
 <span class="blue-text">Second Number</span><b class="" 
 contenteditable="true" oninput="edit(this)">Numbe</b><br>
</li>
<li>
 <div id ="id2"class="card center">
 <span class="red-text">First Number </span><b class="" 
 contenteditable="true" oninput="edit(this)">Number</b><br>
 <span class="blue-text">Second Number</span><b class="" 
 contenteditable="true" oninput="edit(this)">Number</b><br>
</li>
</ul>
 

JS

 function edit(el) {
    let x = el.innerHTML;
    localStorage.setItem("localNumber",x);
    //Update Values
    let row =  $(this).parent().attr('id');
    //let row =  $('li div').attr('id'); //Works but only grabs id of First div never the second 
    console.log(row);
 

Ответ №1:

Вашу строку необходимо изменить. Используйте el вместо this . el будет ссылаться на элемент, для которого вы вызываете функцию.

 function edit(el) {
  let x = el.innerHTML;
  //localStorage.setItem("localNumber", x);
  //Update Values
  let row = $(el).parent().attr('id');
  //let row =  $('li div').attr('id'); //Works but only grabs id of First div never the second 
  console.log(row);
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div id="id1" class="card center">
      <span class="red-text">First Number </span><b class="" contenteditable="true" oninput="edit(this)">Number</b><br>
      <span class="blue-text">Second Number</span><b class="" contenteditable="true" oninput="edit(this)">Numbe</b><br>
  </li>
  <li>
    <div id="id2" class="card center">
      <span class="red-text">First Number </span><b class="" contenteditable="true" oninput="edit(this)">Number</b><br>
      <span class="blue-text">Second Number</span><b class="" contenteditable="true" oninput="edit(this)">Number</b><br>
  </li>
</ul>