Question

我正试图在选择更改时获得父div的孙子的val。我将包括一个小提琴，但可以根据需要在此处输入代码......

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

如果更改秒数，我需要键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>

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

{{1}}

jQuery - 得到父母孙子的val（）

2 个答案: