jQuery最后一个子值()未定义

Question

这是我的代码：

$(document).on('change', '.item-checkbox', function () {
$(this).parent().find('.val-before').val();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="li-14">
<input class="val-before hidden" type="text" value="checked">
<input type="checkbox" class="item-checkbox">
</li>
<li id="li-15">
<input class="val-before hidden" type="text" value="checked">
<input type="checkbox" class="item-checkbox">
</li>
</ul>

在li-14或非li-15中，val为"已检查"或"未检查">

在li-15中，val是未定义的

怎么了？

Answer 1

尝试prev()功能

使用$(this).prev('.val-before').val();而不是这个$(this).parent().find('.val-before').val();

$(document).on('change', '.item-checkbox', function() {
var val = $(this).prev('.val-before').val();
console.log(val);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>...
<li id="li-14">
<input class="val-before hidden" type="text" value="checked">
<input type="checkbox" class="item-checkbox">
</li>
<li id="li-15">
<input class="val-before hidden" type="text" value="checked">
<input type="checkbox" class="item-checkbox">
</li>
</ul>

Answer 2

看看这个，

$('.item-checkbox').on('change', function () {
if($(this).val() == 'checked'){
$(this).prev().val('unchecked');
$(this).val('unchecked');
console.log($(this).prev().val());
}
else {
$(this).prev().val('checked');
$(this).val('checked');
console.log($(this).prev().val());
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="li-14">
<input class="val-before hidden" type="text" value="">
<input type="checkbox" class="item-checkbox">
</li>
<li id="li-15">
<input class="val-before hidden" type="text" value="">
<input type="checkbox" class="item-checkbox">
</li>
</ul>

Answer 3

我发现了这个问题的原因，而不是jQuery css选择器不工作，因为元素id重复。