使用jQuery在表单中选择父项然后子项

Question

I have a loop in my server side script that puts out many forms in this variety:

<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>

From .myCheckbox I need to be able to access/select only the nested 2 .myButton's in this form and access to the nested .mySelect. What's the proper selectors?

Remember I have lots of these forms on the page and only want the one I'm on.

I have started:

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

Thanks.

Answer 1

Shouldn't something like this work:

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

Of course, you could accomplish this in other ways by looking at siblings, or traversing the dom. But more than likely your form will have elements added to it, or removed from it. Finding the common ancestor (eg, the form element) would help make your application scalable and more robust for future changes.