基於Javascript中的anoter單擊元素向下查找最接近的元素

Question

我有一個動態表單，可以添加新行，刪除行。以下是代碼：

// HTML 
<div class="row"> 
    <div class="col-xs-4"> 
    <ul> 
     <li><input type="checkbox"></li> 
     <li><input class="landmark" type="checkbox" value="4" name="patient[block_procedure_part2_notes_attributes][0][monitoring_device_ids][]" id="patient_block_procedure_part2_notes_attributes_0_monitoring_device_ids_4" /></li> 
     <li><input type="checkbox"></li> 
     <li><input type="checkbox"></li> 
    </ul> 
    </div> 
    <div class="col-xs-8"> 
    <ul> 
     <li><input type="checkbox"></li> 
     <li><input class="us_image" type="radio" value="clear" checked="checked" name="patient[block_procedure_part2_notes_attributes][0][us_image]" id="patient_block_procedure_part2_notes_attributes_0_us_image_clear" /></li> 
     <li><input class="us_image" type="radio" value="clear" checked="checked" name="patient[block_procedure_part2_notes_attributes][0][us_image]" id="patient_block_procedure_part2_notes_attributes_0_us_image_poor" /></li> 
     <li><input type="checkbox"></li> 
    </ul> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-4"> 
    <ul> 
     <li><input type="checkbox"></li> 
     <li><input class="landmark" type="checkbox" value="4" name="patient[block_procedure_part2_notes_attributes][1][monitoring_device_ids][]" id="patient_block_procedure_part2_notes_attributes_1_monitoring_device_ids_4" /></li> 
     <li><input type="checkbox"></li> 
     <li><input type="checkbox"></li> 
    </ul> 
    </div> 
    <div class="col-xs-8"> 
    <ul> 
     <li><input type="checkbox"></li> 
     <li><input class="us_image" type="radio" value="clear" checked="checked" name="patient[block_procedure_part2_notes_attributes][1][us_image]" id="patient_block_procedure_part2_notes_attributes_1_us_image_clear" /></li> 
     <li><input class="us_image" type="radio" value="clear" checked="checked" name="patient[block_procedure_part2_notes_attributes][1][us_image]" id="patient_block_procedure_part2_notes_attributes_1_us_image_poor" /></li> 
     <li><input type="checkbox"></li> 
    </ul> 
    </div> 
</div> 

// Javascript 
var landmark = $('input.landmark'); 

landmark.change(function(event) { 
    var usImageOptions = $(event.target).closest('input.us_image'); 
    if (landmark.prop('checked')) { 
    resetInputs(usImageOptions); 
    controlFormSub(); 
    disableInputs(usImageOptions, true); 
    } else { 
    disableInputs(usImageOptions, false); 
    } 
}); 

您可以看到有2個.row s。更多的行可以添加一個添加按鈕，或刪除一個刪除按鈕。

這裏我試圖關閉usImageOptions單選按鈕，對應於選中的最近的.landmark。如果第一個.row中的.landmark被選中，則第一個.row的.usImageOptions應被清除並禁用。第二個.row應該是完好的。

我不願意被其他類找到，因爲如果他們改變了，那麼這段代碼就會中斷。

我試過很多方法來選擇同一行內的.usImageOptions但不能。我該怎麼辦？

Answer 1

最終使用：

var usImageOptions = $(event.target).closest('.row').find('.us_image'); 

這將首先檢測點擊的元素，然後查找最接近.row（雖然有很多，但它會選擇最接近以上），然後看爲.us_image內發現.row。

Answer 2

如果你使用jQuery，您可以從那裏搶.row父，並選擇您的單選按鈕：

$('.landmark').on('change', function(e){ 
    $(this).parents('.row').find('.us_image').prop('disabled', true); 
}); 

編輯：既然你要添加更多的行，你可能需要使用事件委派，以便您可以捕獲添加的任何行。

$(document.body).on('change', '.landmark', function(e){ 
    $(this).parents('.row').find('.us_image').prop('disabled', true); 
});