jQuery - 获取父母孙子的价值（）

Posted 2023-05-09

【中文标题】jQuery - 获取父母孙子的价值（）

【英文标题】：jQuery - getting val() of parents grandchildren

【发布时间】：2016-01-04 13:51:03

【问题描述】：

http://jsfiddle.net/7uygxcdL/7/

我正在尝试在选择更改时获取父 div 的孙子的 val。 我会包括一个小提琴，但可以根据需要在这里放代码......

所以在示例中.. 如果您更改第一个选择，我想控制台记录键 1 和 val 1

如果你改变秒，我想要 key 2 和 val 2...

我现在要阅读关于 jquery 查找的 DOM..

$('.reward_select').change(function()
    console.log($(this).next('input[name="reward_key"]').val());
    console.log($(this).next('input[name="reward_value"]').val());
);

还有我的 html：

    <div class="reward_entry">
        <div class="reward_item">
            <div class="col-sm-2">
                <select name="item_type[]" class="reward_select">
                    <option value="1">option 1</option>
                    <option value="2">option 2</option>
                    <option value="3">option 3</option>
                </select>
            </div>

            <div class="col-sm-2">
                <input type="text" name="reward_key[]" value="key 1" />
            </div>

            <div class="col-sm-2-offset-5">
                <input type="text" name="reward_value[]" value="val 1" />
            </div>
      </div>
    ====================
      <div class="reward_item">
          <div class="col-sm-2">
              <select name="item_type[]" class="reward_select">
                  <option value="1">option 1</option>
                  <option value="2">option 2</option>
                  <option value="3">option 3</option>
              </select>
          </div>

          <div class="col-sm-2">
              <input type="text" name="reward_key[]" value="key 2" />
          </div>

          <div class="col-sm-2-offset-5">
              <input type="text" name="reward_value[]" value="val 2" />
          </div>
       </div>
     </div>

【问题讨论】：

jsfiddle.net/abhitalks/7uygxcdL/9

jsfiddle.net/7uygxcdL/12

【参考方案1】：

您的选择器不正确。 select 元素没有紧随其后的兄弟input。您可以将代码更改为：

$('.reward_select').change(function() 
  console.log($(this).parent().next().children().val());
  console.log($(this).parent().next().next().children().val());
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reward_entry">
  <div class="col-sm-2">
    <select name="item_type[]" class="reward_select">
      <option value="1">option 1</option>
      <option value="2">option 2</option>
      <option value="3">option 3</option>
    </select>
  </div>
  <div class="col-sm-2">
    <input type="text" name="reward_key[]" value="key 1" />
  </div>
  <div class="col-sm-2-offset-5">
    <input type="text" name="reward_value[]" value="val 1" />
  </div>====================
  <div class="col-sm-2">
    <select name="item_type[]" class="reward_select">
      <option value="1">option 1</option>
      <option value="2">option 2</option>
      <option value="3">option 3</option>
    </select>
  </div>
  <div class="col-sm-2">
    <input type="text" name="reward_key[]" value="key 2" />
  </div>
  <div class="col-sm-2-offset-5">
    <input type="text" name="reward_value[]" value="val 2" />
  </div>
</div>

如果您可以更改 html 标记，我建议将 input 元素作为子元素包含在类 col-sm-2 的元素中：

$('.reward_select').change(function() 
  $(this).nextAll().children().each(function() 
    console.log($(this).val());
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reward_entry">
  <div class="col-sm-2">
    <select name="item_type[]" class="reward_select">
      <option value="1">option 1</option>
      <option value="2">option 2</option>
      <option value="3">option 3</option>
    </select>
    <div class="col-sm-2">
      <input type="text" name="reward_key[]" value="key 1" />
    </div>
    <div class="col-sm-2-offset-5">
      <input type="text" name="reward_value[]" value="val 1" />
    </div>
  </div>====================
  <div class="col-sm-2">
    <select name="item_type[]" class="reward_select">
      <option value="1">option 1</option>
      <option value="2">option 2</option>
      <option value="3">option 3</option>
    </select>
    <div class="col-sm-2">
      <input type="text" name="reward_key[]" value="key 2" />
    </div>
    <div class="col-sm-2-offset-5">
      <input type="text" name="reward_value[]" value="val 2" />
    </div>
  </div>
</div>

【讨论】：

太酷了……！！有没有办法也可以添加特定的类查找，所以我的代码本身就是 cmets...

@Beertastic 如果您能够更改 html 标记，请检查我的替代方案。

@Beertastic 更新第二个示例以使用迭代获取所有 input 值。

【参考方案2】：

你可以试试这个。也许不是最简单的方法。

$('.reward_select').change(function()
    console.log$(this).parent().next().children().val());
    console.log$(this).parent().next().next().children().val());
);