使用jQuery在表單中選擇父項然后子項

Question

我的服務器端腳本中存在一個循環，其中列出了各種形式的多種形式：

<form class="myForm">
    <input type="checkbox" class="myCheckbox" />
    <div>
         <span class="myButton active">Button 1</span>
         <span class="myButton">Button 2</span>
         <div clas="myDiv">
             <select class="mySelect">
                 <option></option>
                 ...
                 <option></option>
             </select>
         </div>
    </div>
</form>

從.myCheckbox，我需要能夠以這種形式訪問/選擇僅嵌套的2 .myButton，並訪問嵌套的.mySelect。 什么是合適的選擇器？

記住，我在頁面上有很多這樣的表格，只想要我正在使用的表格。

我已經開始了：

$('body').on('change', '.myCheckbox', function () {
  if ($(this).is(':checked')) 
    ...

謝謝。

Answer 1

不應該像這樣的工作：

var $form     = $(this.form);
var $elements = $form.find('.myButton,.mySelect');

當然，您可以通過查看兄弟姐妹或遍歷dom來以其他方式完成此操作。 但是，您的表單很有可能會添加或刪除元素。 查找共同祖先（例如，表單元素）將有助於使您的應用程序具有可伸縮性，並且對於將來的更改更加健壯。