jQuery - 得到父母孙子的val()

Question

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

我试图在选择更改时获得父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.您可以将代码更改为:

$('.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>