javascript - 在Jquery中选择相邻父元素的子元素

Question

现在我有一个 Bootstrap 行，其中设置了一个复选框和输入。

<div class="row">
<div class="AdminFees">
    <div class="col-md-2"><input type="checkbox" class="make-switch feeswitch" data-on-color="info" data-off-color="info" data-on-text="Yes" data-off-text="No" name="HasPerMemberFee" checked="@Model.Contract.HasPerMemberFee" /></div>
</div>
<div class="col-md-2"><input type="text" class="form-control" placeholder="$0.00" id="PerMemberFeeAmount" name="PerMemberFeeAmount" value="@Model.Contract.PerMemberFeeAmount" /></div>

我有 6 或 7 个非常相同的字段对，我正在一般性地操作这些字段对，因此我不必创建多个函数。我无法弄清楚如何从复选框元素引用文本输入元素。

Jquery:

$('.feeswitch').each(function () {
    $(this).on('switchChange.bootstrapSwitch', function () {
        if ($(this).bootstrapSwitch('state') == true)
            $(this).next('input').css('visibility', 'visible');
        else
            $(this).next('input').css('visibility', 'hidden');
    });
});

我尝试过 next 和 nextAll，但据我了解，它们只能找到子元素。我需要知道如何选择第二个相邻父元素的子元素。

试图简化情况:

该复选框有 2 个父级(两个 div)和 1 个相邻元素(另一个 div 列)。我需要访问其他 div 列的子列，但它需要通用，因此我不需要为页面上的每个复选框/输入对创建 8 个函数。

Answer 1

我不确定我是否同意接受的解决方案是稳定的，因为它的选择器很大程度上取决于保持结构相同，我建议这在大多数项目中不太可能。如果我建议一个替代方案，我认为这里更好的方法是使用选择器的范围参数。

$('.feeswitch').on('switchChange.bootstrapSwitch', function () {
    var switchState = $(this).bootstrapSwitch('state') ? "visible" : "hidden";
    $('input',$(this).closest('.row')).not($(this)).css('visibility', switchState);
});

无论如何，您绝对应该更多地了解 jQuery DOM 遍历方法，因为这几乎就是 jQuery 的巨大魔力:

https://api.jquery.com/category/traversing/