jQuery

Question

我正在尝试在 select 更改中获取 parent div 的孙子的 val。我将包含一个 fiddle，但可以根据需要在此处放置代码...

所以在示例中..如果您更改第一个 select，我想控制台日志键 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>

Answer 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 元素作为子元素包含在 class 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>

Answer 2

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

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

jQuery - 获取 parents 孙子的 value()

jQuery - getting val() of parents grandchildren

dom

jquery-selectors