#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>