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()); 
});