Question

我正试图找到一种方法来获取与点击按钮相同的li标签内的输入字段的值，但无法弄清楚如何。我已经尝试使用父选择器但无法使其工作。

Jquery-code

$('.addButton').live('click', function() {
var usedFood = JSON.parse(localStorage.getItem('usedFood'));

//trying to get this value without using an ID
var preParse = $('#inputFieldFood').val();

//var preParse = $(this).parent().parent()

var temp = parseInt(preParse);

usedFood += temp;

$('.listAmount').html(usedFood);

localStorage.setItem('usedFood', JSON.stringify(usedFood));

temp = 0;
});

HTML：

<div data-role="content" class="content">
      <ul data-role="listview" id="categoryList">
          <li>
              <label class="listItemName">Food</label>
              <label class="listAmount"></label>
              <div class="textfieldContainer">
                  <input id="inputFieldFood" type=number pattern=[0-9]* inputmode=numeric>
              </div>
              <div class="buttonContainer">
                  <a data-role="button" class="addButton">+</a>
              </div>
          </li>
          <li id="addNew"><a>Add new category</a></li>
      </ul>
  </div>

Answer 1

您可以使用.closest()找到li元素，然后使用元素选择器查找其中的input元素

var preParse = $(this).closest('li').find('input').val();

注意：元素的ID必须是唯一的，因此如果您有重复的结构并想要对相似的元素进行分组，那么请使用类名而不是ID

<input class="inputFieldFood" type=number pattern=[0-9]* inputmode=numeric>

尝试从同一<li>标记</li>中选择元素时使用哪个选择器

1 个答案: