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>

Answer 2

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

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