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>
最佳答案
您的选择器不正确。 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>
关于jQuery - 获取 parent 孙子的 value(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32990403/