Question

我有一个jquery应用程序，我正在模板包含3个文本字段的html块。我需要获取特定块中的文本字段的值。标识符在所有块中复制。

示例代码

<div>
  <div class="htmlBlock">
    <ul>
      <li>
        <input class="myInput1" type="text">
        <input class="myInput2" type="text">
        <input class="myInput3" type="text">
      </li>
      <li>
        <input class="myInput1" type="text">
        <input class="myInput2" type="text">
        <input class="myInput3" type="text">
      </li>
      <li>
        <input class="myInput1" type="text">
        <input class="myInput2" type="text">
        <input class="myInput3" type="text">
      </li>
    </ul>
   <button class="clickMe">Click to get values of this block</button>
  </div>
  <div class="htmlBlock">
    <ul>
      <li>
        <input class="myInput1" type="text">
        <input class="myInput2" type="text">
        <input class="myInput3" type="text">
      </li>
    </ul>
  <button class="clickMe">Click to get values of this block</button>
 </div>
</div>

当我点击.clickMe按钮时，我想调用$('.myInput').val()并仅在按钮所在的块内获取值。

Answer 1

您可以执行以下操作：

$('button.clickMe').on('click', function() {
    var block = $(this).closest('.htmlBlock');
    var inputs = block.find('input[type="text"]');
    // .myInput1 values as an array.
    var myInput1Vals = block.find('.myInput1').map(function() {
        return this.value;
    });
    // Do what you want to do
});

我没有使用$('.myInput').val()，因为每个输入都有不同的类。但你可以循环遍历它们，随心所欲地做任何事情，它们都会在那个区域内进行本地化。

jsfiddle

此fiddle在.toArray()之后使用.map将其转换为不是jQuery对象的数组。

Answer 2

$('button.clickMe').on('click', function() {
    var values = $(this).closest('.htmlBlock').find('input[type="text"]').map(function(){
                     return this.value;
                 }).get();
});

Jquery获取公共父级中的输入元素值数组

2 个答案: