jQuery - 获取 parent 孙子的 value()

Question

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

我试图在选择更改时获取父 div 的孙子的 val。我将包括一个 fiddle ，但可以根据需要将代码放在这里......

所以在示例中..如果您更改第一个选择，我想控制台日志键 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 元素作为子元素包含在类 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>