时间戳

首页 > 解决方案 > 似乎无法获得嵌套在 LI 标记内的 div 的父 ID

javascript - 似乎无法获得嵌套在 LI 标记内的 div 的父 ID

问题描述

我试图实现的是在“数字”的值发生变化时获取当前 li 的 div id

<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);

标签： javascripthtmljquery

解决方案

您的行需要修改。使用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>

推荐阅读