在Jquery中選擇相鄰父元素的子元素

Question

現在我有一個帶有選擇框的引導行，並在其中輸入。

<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

我不確定我是否同意所接受的解決方案是否穩定，因為它的選擇器很大程度上取決於保持您的結構不變，這在大多數項目中都不太可能。 如果我建議使用其他方法，我認為這里更好的方法是采用選擇器的scope參數。

$('.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/

Answer 2

您將要說些類似的話：

$(this).parent().parent().next('div').find('input').
  css('visibility', 'visible');

並且由於這是通用的，因此您不需要each() ：

$('.feeswitch').on('switchChange.bootstrapSwitch', 
  function () {
    var visi = $(this).bootstrapSwitch('state') ? 'visible' : 'hidden';

    $(this).parent().parent().next('div').find('input').
      css('visibility', visi);
  }
);