title: How to filter inputs by parent node, using JavaScript?
body: <p>I have a problem with filtering inputs.</p>
  
  <p>I have partial view which include sth like this:</p>
  
  <pre><code>&lt;div class="editor"&gt;
  &lt;div class="demand-editor-label editor-label"&gt;@Html.LabelFor(m =&gt; m.WorkGroupID) @Model.WorkTypeD&lt;/div&gt;
  &lt;div class="default-editor-field"&gt;
      &lt;div style="max-height:100px; overflow:auto;border-style:solid;border-width:1px;padding:3px; width: 98% !important; max-width:590px" id="@string.Format("uiDivWorkGroup{0}",Model.WorkTypeD)"&gt;  
          @Html.CheckBoxListFor(x =&gt; x.WorkGroupID, x =&gt; x.WorkGroupList, x =&gt; x.Key, x =&gt; x.Value, x =&gt; x.SelectedWorkGroups, new HtmlListInfo(HtmlTag.table, 2))   
      &lt;/div&gt;                             
  &lt;/div&gt;
  </code></pre>
  
  <p>
  <br /></p>
  
  <p>I execute it in my view like this:</p>
  
  <pre><code>&lt;div id="uiDivWorkGroupMainNn" style="padding-top: 5px; clear: both"&gt;                
                       @Html.PartialFor(model =&gt; model, MVC.Components.Views.Partial.WorkGroupView)
                  &lt;/div&gt;
  
  &lt;div id="uiDivWorkGroupMainSn" style="padding-top: 5px; clear: both"&gt;
                      @Html.PartialFor(model =&gt; model, MVC.Components.Views.Partial.WorkGroupView)
                  &lt;/div&gt;
  
  &lt;div id="uiDivWorkGroupMainWn" style="padding-top: 5px; clear: both"&gt; 
                      @Html.PartialFor(model =&gt; model, MVC.Components.Views.Partial.WorkGroupView)
                  &lt;/div&gt;
  </code></pre>
  
  <p>There is three different groups that using this partialview.</p>
  
  <p>There is output:</p>
  
  <pre><code>&lt;div id="uiDivWorkGroupMainNn" style="padding-top: 5px; clear: both;"&gt;
  &lt;div class="editor"&gt;
      &lt;div class="demand-editor-label editor-label"&gt;&lt;label for="WorkGroupID"&gt;Work group&lt;/label&gt; Nn&lt;/div&gt;
      &lt;div class="default-editor-field"&gt;
          &lt;div id="uiDivWorkGroupNn" style="border-width: 1px; border-style: solid; padding: 3px; width: 98% !important; overflow: auto; max-height: 100px; max-width: 590px;"&gt;  
              &lt;table cellSpacing="0"&gt;
              &lt;tbody&gt;
              &lt;tr&gt;
              &lt;td&gt;
              &lt;input name="WorkGroupID" id="WorkGroupID12" type="checkbox" value="1034"&gt;
              &lt;label for="WorkGroupID12"&gt;Emergency [nN]&lt;/label&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;input name="WorkGroupID" id="WorkGroupID13" type="checkbox" value="1021"&gt;
              &lt;label for="WorkGroupID13"&gt;Cable nN&lt;/label&gt;
              &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
              &lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;   
          &lt;/div&gt;                             
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  
  
  &lt;/div&gt;
  &lt;div id="uiDivWorkGroupMainWn" style="padding-top: 5px; clear: both;"&gt;
  &lt;div class="editor"&gt;
          &lt;div class="demand-editor-label editor-label"&gt;&lt;label for="WorkGroupID"&gt;Grupa prac&lt;/label&gt; Wn&lt;/div&gt;
          &lt;div class="default-editor-field"&gt;
              &lt;div id="uiDivWorkGroupWn" style="border-width: 1px; border-style: solid; padding: 3px; width: 98% !important; overflow: auto; max-height: 100px; max-width: 590px;"&gt;
  &lt;table cellSpacing="0"&gt;
                  &lt;tbody&gt;
                  &lt;tr&gt;
                  &lt;td&gt;
                  &lt;input name="WorkGroupID" id="WorkGroupID12" type="checkbox" value="1014"&gt;
                  &lt;label for="WorkGroupID15"&gt;Emergency [Wn]&lt;/label&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                  &lt;input name="WorkGroupID" id="WorkGroupID13" type="checkbox" value="1029"&gt;
                  &lt;label for="WorkGroupID16"&gt;Call Wn&lt;/label&gt;
                  &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                  &lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;   
              &lt;/div&gt;                             
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;br&gt;
  
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Finally I want to use sth like this: </p>
  
  <pre><code>$('input[name|="WorkGroupID"]').change(some function1);
  $('input[name|="WorkGroupID"]').change(some function2);
  $('input[name|="WorkGroupID"]').change(some function3);
  </code></pre>
  
  <p>Unfortunately it collects all inputs and imposes on them 1-3function calls on <em>change event</em> but I want to collect them only from one group and apply them specific function. My first thought was to filter group of inputs by <strong>div</strong> parent which is  for example <strong>uiDivWorkGroupMainWn</strong> but don't know how to do it. If it's even possible. I try sth like this but it doesn't work. I've read about .filter function but I don't know how to use it in this specific situation.</p>
  
  <pre><code>$('input[name|="WorkGroupID"]').parent("#uiDivWorkGroupMainNn").change(some function);
  </code></pre>
  
  <p>At this moment I'm not good at JS, so that's why I'm writing here.</p>